• Ifra Saqlain

  • 18 de janeiro de 2022 07:40
  • Editado

  Community Moderator

  

  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

• Ronit

  • 19 de janeiro de 2022 05:37

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

• Ifra Saqlain

  • 19 de janeiro de 2022 10:34
  • Editado

  Community Moderator

  

  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:

   

  

   

   

   

Por favor, entrar para comentar.