Skip Navigation

[Resuelto] Responsive Slider design

Este hilo está resuelto. Aquí tiene una descripción del problema y la solución.

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 hace 7 años, 1 mes. 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.

Hoy no hay técnicos de soporte disponibles en el foro Juego de herramientas. Siéntase libre de enviar sus tiques y les daremos trámite tan pronto como estemos disponibles en línea. Gracias por su comprensión.

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)

Este tema contiene 24 respuestas, tiene 2 mensajes.

Última actualización por Akhil hace 7 años, 1 mes.

Asistido por: Noman.

Autor
Mensajes
#582396

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 : enlace oculto
layout :enlace oculto

i found this bootstrap code enlace oculto BUT i already have carousell running.

Pls help me take a look.

Thanks

#582441

Noman
Supporter

Idiomas: Inglés (English )

Zona horaria: Asia/Karachi (GMT+05:00)

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?
enlace oculto

Thank you

#582563

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.

#582564

Ok from here: enlace oculto

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.

#582567

some image guide what i want to achieve:

enlace oculto

This is toolset demo magazone slider , at mobile view it doesnt look nice.
enlace oculto

thanks

#582579

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: enlace oculto

#582604

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.

#582619

Noman
Supporter

Idiomas: Inglés (English )

Zona horaria: Asia/Karachi (GMT+05:00)

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:
enlace oculto
Then you can use Owl Carousel, It will look exact same as you want. You can check demo here.
enlace oculto

Thank you

#582620

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.

#582656

Noman
Supporter

Idiomas: Inglés (English )

Zona horaria: Asia/Karachi (GMT+05:00)

okay great then 🙂

[ changing ticket status as = Waiting ]

#582717

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/

#582754

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.

#582772

Noman
Supporter

Idiomas: Inglés (English )

Zona horaria: Asia/Karachi (GMT+05:00)

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

#582773

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. ?

#582775

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