Tagged: , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 2, 2023 at 5:42 pm #1399860
    MotiveAgency

    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
    Sean

    March 4, 2023 at 8:09 pm #1400119
    Mike

    Hey 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 the avia-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”:
    Enfold_Support_520.jpeg
    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:
    Enfold_Support_522.jpeg
    on mobile only one column will show at a time and clicking the arrow will toggle the next column in a circle:
    Enfold_Support_524.jpeg

    Best regards,
    Mike

    March 7, 2023 at 9:38 am #1400331
    MotiveAgency

    Hi 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.
    Sean

    March 7, 2023 at 12:21 pm #1400343
    Mike

    Hi,
    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

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Initialise slider’ is closed to new replies.