How to make the Guide hero section as a slider?

3 Comentários

  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Hello Ronit,

    You only need to follow the given simple steps to make the hero section as a slider:

     

    1). Copy the given CDNs to your document_head.hbs file.

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

     

    Screenshot:

     

     

    2).  Add the given script code to your script.js file at the bottom area.

    $(document).ready(function(){
    $('.owl-carousel').owlCarousel({
    loop:true,
    items:1,
    margin:0,
    autoplay:true,
    autoplayTimeout:3000,
    autoplayHoverPause:true,
    responsiveClass:true,
    nav:true
    })
    });

     

    Screenshot:

     

     

    3). Wrap your hero section HTML inside the wrapper div -

    <div class="owl-carousel">  -- hero section HTML --  </div>

     

    See how I did, I added the hero section two times inside the wrapper - <div class="owl-carousel"> ---- </div>.

     

     

    4). Here, you need to add classes for each hero DIV background image.

     

     

    5). Add hero area background image. Copy the below CSS code and paste to your style.css file.

    .hero-slider-image-one {
    background-image: url(https://theme.zdassets.com/theme_assets/1762844/eabf50894a56b2eb7b2c5b5dac193b307d3aeccc.jpg);
    }

    .hero-slider-image-two {
    background-image: url(https://theme.zdassets.com/theme_assets/1274902/e8671b2629a56a2a58bdce403940f55557d1dc6b.jpg);
    }

    Screenshot:

     

     

    6).  Add the given CSS code to your style.css file at the bottom:

    .owl-nav {
    font-size: 50px;
    text-align: center;
    }

    .hero {
    margin-bottom: 0;
    }

    Screenshot:

     

     

    Output:  The image is automatically sliding, but you can change its behaviour via JS.

     

    Go to the script.js file and change true to false.

    $(document).ready(function(){
    $('.owl-carousel').owlCarousel({
    loop:true,
    items:1,
    margin:0,
    autoplay:true, //it can be false to stop sliding automatically
    autoplayTimeout:3000, // sliding timing can be changed
    autoplayHoverPause:true, // Image would be stopped, when you mouse hover over the image
    responsiveClass:true,
    nav:true
    });
    });

     

     

    If any confusion, do let me know :)

     

    Thanks

    Team Diziana

    1
  • Ronit

    Ifra, I think you don't understand the purpose of slider I need only to slide the background image not the whole hero section

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Okay, so here are some points to update:

     

    1).  Upload your images into the assets folder.

     

    2). Now, add those background images to your hero section.

     

    3). And, add the CSS code as I added.

    .owl-item{
    height: 300px;
    }

    .owl-carousel{
    height: 300px;
    position: absolute !important;;
    }

     

    Screenshot for the same:

     

     

     

     

    1

Por favor, entrar para comentar.

Powered by Zendesk