![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
March 2, 2023 at 5:42 pm #1399860
Hi Support,
I am looking for a way to turn a normal Color Section with 3 columns into a 1 column slider on mobile. I’m aware I could achieve this by having 2 components and showing/hiding the relevant component per device, but I would like to eliminate having multiple elements that show for particular devices as it can confuse editors.
Is it possible to initialise a slider in jquery?
For example, if I put a class on the Color Section and in my jquery file have something like the following (using slick js as an example):
if($(window).innerWidth() <= 1024){ $('.slider .entry-content-wrapper').slick(); }
What slider does the Content Slider use as that looks to be the most simple slider and is there a function to initialise it? something like .slick()
If there is another way to achieve this that I’m not aware of please let me know.
Thanks
SeanMarch 4, 2023 at 8:09 pm #1400119Hey MotiveAgency,
Thanks for your question, I’m not familiar with slick.js I imagine that you could add your “slides” via a code block element in the color section and add css to make the “slides” look like columns for desktop devices, but I don’t see an easy way to apply the javascript to the columns to become slides.
The Content Slider uses theavia-shortcodes/slideshow/slideshow.js
, but rewriting this for columns would be a big job.
I recommend your first idea of using 2 elements and showing/hiding the relevant element per device.
Perhaps another option would be to try adding a custom classes to your three columns ie: .one, .two, .three and add a icon element with the custom class .next which only shows on mobile to toggle between your column “slides”:
Then in the code block element add this:<style> @media only screen and (max-width: 767px) { #top #main .avia-section .entry-content-wrapper { overflow: hidden; position: relative; height: 100vh; } #top #main .avia-section .entry-content-wrapper .no_margin.av_one_third { float: left; width: 100%; position: relative; } } </style> <script> (function($) { var state = 1; $('.next').click(function() { if(state==1){ $('.one').hide(); $('.two').show(); state=2; } else if(state==2){ $('.two').hide(); $('.three').show(); state=3; } else if(state==3){ $('.three').hide(); $('.one').show(); state=1; } }); }(jQuery)); </script>
On desktop you will have 3 columns:
on mobile only one column will show at a time and clicking the arrow will toggle the next column in a circle:
Best regards,
MikeMarch 7, 2023 at 9:38 am #1400331Hi Mike,
Wow, thank you so much for your detailed and informative response. That approach will definitely come in handy.
I ended up going down the slick.js approach, I have the slick js script in my vendor file which I pull in via my functions file:
function vendor_scripts() { wp_enqueue_script( 'vendor', get_stylesheet_directory_uri() . '/js/vendor.js', array('jquery'), time() ); } add_action('wp_enqueue_scripts', 'vendor_scripts');
And then in my main.js file I am targeting a custom class and the wrapper around the columns, slick comes with responsive options too so I can tell it to uninitalise above 768px with unslick:
$('.featuredboxes .entry-content-wrapper').slick({ mobileFirst: true, dots: true, arrows: false, responsive: [ { breakpoint: 768, settings: "unslick", } ] });
Thought I would include my code incase anyone else wanted to take this approach also.
Thanks again Mike it’s greatly appreciated.
SeanMarch 7, 2023 at 12:21 pm #1400343Hi,
Glad to hear that you have this sorted out and thanks for sharing your solution, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike -
AuthorPosts
- The topic ‘Initialise slider’ is closed to new replies.