[Gelöst] Responsive Slider design

[Author]

Artikel

[Akhil]

Hi Noman,

I am trying to create a responsive slider for my staging site.

At 320px it should load only one full width view with navigations.
my media queries is complete

@media (min-width: 480px) and (max-width: 575px)  {}
@media (min-width: 576px) and (max-width: 767px)  {}
@media (min-width: 768px) and (max-width: 991px)  {}
@media (min-width: 992px) and (max-width:1199px)  {}
@media (min-width:1200px) {}

I have designed the slider but its working for full width or desktop view only.
I'm stuck at mobile views.

On the other note. is toolset bottstrap 4 ready ? can i just enque the stylesheet for this as well as fontawesome4 .?

The slider code/template is here : versteckter Link
layout :versteckter Link

i found this bootstrap code versteckter Link BUT i already have carousell running.

Pls help me take a look.

Thanks

[Noman]

Hi,

Thank you for contacting Toolset support.

>> On the other note. is toolset bottstrap 4 ready ? can i just enque the stylesheet for this as well as fontawesome4 .?
No, because it has a completely different markup. For detail:
https://toolset.com/forums/topic/can-i-use-bootstrap-4-even-if-toolset-doesnt-use-it/#post-499656

Example site showing 4 posts as one slide in stack format on small device. Do you want to make a similar view in small device?
versteckter Link

Thank you

[Akhil]

Hi Noman,
Thank you for looking into this.

the problem is i 'm already using carousel for my post type page,not sure if it will cause any performance issue with using many same codes. to save time i'm just going to display latest 4 with no paginations or sliders, and a link for more latest page.

[Akhil]

Ok from here: versteckter Link

i need to show responsive such as 1 post/block for mobile view , full 4 col/block for full width or > width 992px .
in toolset i find it imposible to do this with the existing views.

thanks.

[Akhil]

some image guide what i want to achieve:

versteckter Link

This is toolset demo magazone slider , at mobile view it doesnt look nice.
versteckter Link

thanks

[Akhil]

in css there is many ways to hide the class

mainly :nth-child, last-of-type/class etc but this only hide and the next pagonation willl still show the rest of the post.

lets discuss.

the closer sample: versteckter Link

[Akhil]

Hi Noman,

i have decided just to hide the image for mobile resp view also for performance reason.
its working good now. But i still need the resp slide for the other CPT,

thanks.

[Noman]

Hello,

I have decided just to hide the image for mobile resp view also for performance reason.
its working good now.
>> Looks like issue is solved now, please confirm.

But i still need the resp slide for the other CPT.
>> Can you please let me know which CPTs need to make responsive. Please provide link where I can see the issue.

- If you want to make slider like this:
versteckter Link
Then you can use Owl Carousel, It will look exact same as you want. You can check demo here.
versteckter Link

Thank you

[Akhil]

Hi Noman,

Yes , own carousell look like something that i exactly need. would look into this and post here if any issue .

have a nice day Noman.

[Noman]

okay great then 🙂

[ changing ticket status as = Waiting ]

[Akhil]

Hi as I need/ will be using many of this carousel . This should be my approach ?

https://toolset.com/documentation/user-guides/using-custom-rows-add-custom-theme-functionality/

[Akhil]

Hi Noman

i realize this is for static images . can't use for my purpose. my solution would be using content template with custom functions , am i right ? just like my flexslider.

i need some guide on this. the search forum result is not clear.

thanks.

[Noman]

Yes you need to use Views for this, that is the normal method we use while creating sliders or carousels, just like it is used in flexslider module. This is same either if we use owl carousel or flexslider. The method and steps remains the same, just a different use type of slider scripts.

Thank you

[Akhil]

HI Noman, its me again,

i manage to get the carousel working in my content template woith demo code..
BUT how do i set the option to limit number to 10 postings etc in content template. View has this settings , but i cant use views for this purpose right. ?

[Akhil]

Sorry didnt read your reply earlier. i ll try . thanks.