Skip Navigation

[Resolved] Responsive Slider design

This thread is resolved. Here is a description of the problem and solution.

Problem:
Carousel Slider is not responsive, how to create a responsive slider?

Solution:
you can use Owl Carousel, It will look exact same as you want. You can check demo here.
https://owlcarousel2.github.io/OwlCarousel2/

Also I posted some instructions here in the past that may help you to understand bits of it:
https://toolset.com/forums/topic/we-need-to-create-a-carousel-slider-with-images-inserted-in-a-repeated-field/

Own carousel API doc:
https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

This support ticket is created 7 years, 1 month ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 12:00 – 17:00 12:00 – 17:00 12:00 – 17:00 12:00 – 17:00 12:00 – 17:00 -
- 18:00 – 21:00 18:00 – 21:00 18:00 – 21:00 18:00 – 21:00 18:00 – 21:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 24 replies, has 2 voices.

Last updated by Akhil 7 years ago.

Assisted by: Noman.

Author
Posts
#582776

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

No problem, take your time. Also I posted some instructions here in the past that may help you to understand bits of it:
https://toolset.com/forums/topic/we-need-to-create-a-carousel-slider-with-images-inserted-in-a-repeated-field/

Thanks

#582788

Hi Noman, thanks for the link. very useful.

However using views there is soem challanges as the code for pagintions., and limits are populated even if you dont use the options.

what should be the Pagination and Sliders Settings ? No paginations ?

thanks.

#582793

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

No Pagination.png

Yes to disable Pagination and limit, just them as No -- screenshot attached.

#582797

HI Noman ,

appreciate if you can look at it.

output : hidden link
layout: hidden link
views: hidden link

i have strange 3 col same imageand post output at the moment.

#582831

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

- I have implemented a test carousel slider here:
hidden link

- View that I have used:
hidden link

You have not added CSS, JS for the owl carousel, I have added that css, js in the Views CSS editor and JS editor sections. You can use this View and modify as needed -- please make sure to backup it or duplicate it and then modify as needed. This sample slider view will server as an example for you.

- Own carousel API doc:
hidden link

Have a great weekend, Thank you

#582880

Thanks Noman,

i think you just went beyond your support hours to reply this.
Thats oustanding support there!

Many Thank you !

#582882

Hi Noman,

i notice this view shortcode :https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-view

1. can we use this inside a content template to fetch latest posting and posting limits ?
2. is there any implication of using content template vs Views ?

thanks for explanations !

#582883

Hi Noman, i understand my mistake at early stage. i enter the owl carsl div
" <div class="owl-carousel owl-theme">" at the wrong locations., it was in the loop template.

correct method is what you have done, outside the loop.
regarding the css and js i have removed and it auto ref/fetch from my uploaded dir .

i still would like to understand more on :
using content template vs views, the pro and cons etc.

many thanks !

#583241

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi,

Just got back from weekend today. You can insert that Views into the Content Template. The reason we are using View here instead of Content Template:

- That we are fetching images from Post images (featured image) and we need to run through all posts to get all the images (loop is needed for this). Also Limit, offset, orderby attributes helps.

- In Content Template we don’t have loop but the slider can probably be creating in CT as well. For this one needs to use Repeating image field >> then use [wpv-for-each] over the repeating image field to loop through all images in the repeating image field >> this shortcode also has End (limit) and couple other attributes to use:
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-for-each

More info here:
https://toolset.com/faq/whats-the-difference-between-a-view-and-a-view-template/

Main benefit of Views is that it has Query filter, ordering, limit, pagination controls, ajax loading, etc.

Thanks

#583321

Thank you for the explanations. all good now. thanks .