Auto Images Slider in Odoo

 

In this blog we will explain how to create auto image slider in odoo website as in the image above , so

First : we have to add the images to the website page , for example let us say we have an odoo controller which call page and pass data to this page , and that data contains "image_ids" which is contains all image data , so we can add the images to the page as bellow 

 

<t t-foreach="image_ids" t-as="image">
    <center>
        <div class="mySlides">
            <img t-att-src="image['image_url']" class="img_01"/>
            <br></br>
            <span t-esc="image['image_name']" class="name_01"/>
        </div>
        <span class="dot"></span>
    </center>
</t>

Second : we have to create the JS script which will add the auto move to the slider and we can add it as bellow

 

<script>
    let slideIndex = 0;
    showSlides();

    function showSlides() {
      let i;
      let slides = document.getElementsByClassName("mySlides");
      let imgs = document.getElementsByClassName("img_01");
      let img_urls = document.getElementsByClassName("image_url");
      let dots = document.getElementsByClassName("dot");
      for (i = 0; i &lt; slides.length; i++) {
        slides[i].style.display = "none";
        slides[i].style.margin = "10px";
      }
      for (i = 0; i &lt; imgs.length; i++) {
        imgs[i].style.width = "80%";
        imgs[i].style.height = "470px";
        imgs[i].style.border = "2px solid black";
        imgs[i].style.borderColor = "#875A7B";
        imgs[i].style.borderRadius = "10px";
        imgs[i].style.boxShadow = "3px 5px #bfbfbf";
        imgs[i].style.marginBottom = "10px";
      }
      slideIndex++;
      if (slideIndex > slides.length) {slideIndex = 1}    
      for (i = 0; i &lt; dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
      }
      slides[slideIndex-1].style.display = "block";  
      dots[slideIndex-1].className += " active";
      setTimeout(showSlides, 5000); // Change image every 5 seconds
    }
</script>

Third : adding the CSS style as bellow 

 

.img_01{
    width:80%;
    height:420px;
    transition: .1s ease;
  backface-visibility: hidden;
}
.img_01:hover {
    opacity: 0.3;
}