Сделать автопрокрутку для блока с картинками
Имеется блок с партнёрами для шалона Django, сейчас он переключается только по нажатию на кнопки. Можно-ли как-то сделать, что бы переключение происходило автоматически? Спасибо.
.u-section-1 .u-sheet-1 {
min-height: 123px;
}
.u-section-1 .u-gallery-1 {
height: 96px;
width: 1277px;
margin: 14px auto 13px;
}
.u-section-1 .u-gallery-inner-1 {
scroll-behavior:smooth;
grid-template-columns: repeat(2, auto);
}
.u-section-1 .u-gallery-item-1 {
margin-right: 12px;
}
.u-section-1 .u-over-slide-1 {
padding: 10px;
}
.u-section-1 .u-gallery-item-2 {
margin-right: 12px;
}
.u-section-1 .u-over-slide-2 {
padding: 10px;
}
.u-section-1 .u-gallery-item-3 {
margin-right: 12px;
}
.u-section-1 .u-over-slide-3 {
padding: 10px;
}
.u-section-1 .u-gallery-item-4 {
margin-right: 12px;
}
.u-section-1 .u-over-slide-4 {
padding: 10px;
}
.u-section-1 .u-gallery-item-5 {
margin-right: 12px;
}
.u-section-1 .u-over-slide-5 {
padding: 10px;
}
.u-section-1 .u-gallery-item-6 {
margin-right: 12px;
}
.u-section-1 .u-over-slide-6 {
padding: 10px;
}
.u-section-1 .u-gallery-item-7 {
margin-right: 12px;
}
.u-section-1 .u-over-slide-7 {
padding: 10px;
}
.u-section-1 .u-gallery-item-8 {
margin-right: 12px;
}
.u-section-1 .u-over-slide-8 {
padding: 10px;
}
.u-section-1 .u-gallery-item-9 {
margin-right: 12px;
}
.u-section-1 .u-over-slide-9 {
padding: 10px;
}
.u-section-1 .u-gallery-item-10 {
margin-right: 12px;
}
.u-section-1 .u-over-slide-10 {
padding: 10px;
}
.u-section-1 .u-gallery-item-11 {
margin-right: 12px;
}
.u-section-1 .u-over-slide-11 {
padding: 10px;
}
.u-section-1 .u-gallery-nav-1 {
position: absolute;
left: 10px;
width: 40px;
height: 40px;
}
.u-section-1 .u-gallery-nav-2 {
position: absolute;
right: 10px;
width: 40px;
height: 40px;
}
@media (max-width: 1399px) {
.u-section-1 .u-sheet-1 {
min-height: 112px;
}
.u-section-1 .u-gallery-1 {
height: 74px;
margin-top: 19px;
margin-bottom: 19px;
margin-right: initial;
margin-left: initial;
width: auto;
}
.u-section-1 .u-over-slide-1 {
min-height: 100px;
}
.u-section-1 .u-over-slide-2 {
min-height: 100px;
}
.u-section-1 .u-over-slide-3 {
min-height: 100px;
}
.u-section-1 .u-over-slide-4 {
min-height: 100px;
}
.u-section-1 .u-over-slide-5 {
min-height: 100px;
}
.u-section-1 .u-over-slide-6 {
min-height: 100px;
}
.u-section-1 .u-over-slide-7 {
min-height: 100px;
}
.u-section-1 .u-over-slide-8 {
min-height: 100px;
}
.u-section-1 .u-over-slide-9 {
min-height: 100px;
}
.u-section-1 .u-over-slide-10 {
min-height: 100px;
}
.u-section-1 .u-over-slide-11 {
min-height: 100px;
}
}
section class="u-align-center u-clearfix u-section-1" id="sec-04c9">
<div class="u-clearfix u-sheet u-sheet-1">
<div class="u-expanded-width-lg u-expanded-width-md u-expanded-width-sm u-expanded-width-xl u-expanded-width-xs u-gallery u-layout-horizontal u-lightbox u-no-transition u-show-text-none u-gallery-1" id="carousel-da37">
<div class="u-gallery-inner u-gallery-inner-1" role="listbox"><div class="u-gallery-item u-gallery-item-1" data-image-width="379" data-image-height="253"><div class="u-back-slide"><img class="u-back-image" src={% static "img/1timg.jpg" %}>
</div><div class="u-over-slide u-over-slide-1"></div>
</div><div class="u-gallery-item u-gallery-item-2" data-image-width="140" data-image-height="60"><div class="u-back-slide"><img class="u-back-image" src={% static "img/6.png" %}>
</div><div class="u-over-slide u-over-slide-2"></div>
</div><div class="u-gallery-item u-gallery-item-3" data-image-width="140" data-image-height="60"><div class="u-back-slide"><img class="u-back-image" src={% static "img/4.jpg" %}>
</div><div class="u-over-slide u-over-slide-3"></div>
</div><div class="u-gallery-item u-gallery-item-4" data-image-width="140" data-image-height="60"><div class="u-back-slide"><img class="u-back-image" src={% static "img/5.jpg" %}>
</div><div class="u-over-slide u-over-slide-4"></div>
</div><div class="u-gallery-item u-gallery-item-5" data-image-width="140" data-image-height="60"><div class="u-back-slide"><img class="u-back-image" src={% static "img/8.jpg" %}>
</div><div class="u-over-slide u-over-slide-5"></div>
</div><div class="u-gallery-item u-gallery-item-6" data-image-width="140" data-image-height="60"><div class="u-back-slide"><img class="u-back-image" src={% static "img/5d50d2c2c7dc6.jpg" %}>
</div><div class="u-over-slide u-over-slide-6"></div>
</div><div class="u-gallery-item u-gallery-item-7" data-image-width="140" data-image-height="60"><div class="u-back-slide"><img class="u-back-image" src={% static "img/3.jpg" %}>
</div><div class="u-over-slide u-over-slide-7"></div>
</div><div class="u-gallery-item u-gallery-item-8" data-image-width="140" data-image-height="60"><div class="u-back-slide"><img class="u-back-image" src={% static "img/2.jpg" %}>
</div><div class="u-over-slide u-over-slide-8"></div>
</div><div class="u-gallery-item u-gallery-item-9" data-image-width="140" data-image-height="60"><div class="u-back-slide"><img class="u-back-image" src={% static "img/5d50d2bb7013b.png" %}>
</div><div class="u-over-slide u-over-slide-9"></div>
</div><div class="u-gallery-item u-gallery-item-10" data-image-width="140" data-image-height="60"><div class="u-back-slide"><img class="u-back-image" src={% static "img/5d50d3893f5691.jpg" %}>
</div><div class="u-over-slide u-over-slide-10"></div>
</div><div class="u-gallery-item u-gallery-item-11" data-image-width="140" data-image-height="60"><div class="u-back-slide"><img class="u-back-image" src={% static "img/1.jpg" %}>
</div><div class="u-over-slide u-over-slide-11"></div>
</div></div>
<a class="u-absolute-vcenter u-gallery-nav u-gallery-nav-prev u-grey-70 u-icon-circle u-opacity u-opacity-70 u-spacing-10 u-text-white u-gallery-nav-1" href="#" role="button">
<span aria-hidden="true">
<svg viewBox="0 0 451.847 451.847"><path d="M97.141,225.92c0-8.095,3.091-16.192,9.259-22.366L300.689,9.27c12.359-12.359,32.397-12.359,44.751,0
c12.354,12.354,12.354,32.388,0,44.748L173.525,225.92l171.903,171.909c12.354,12.354,12.354,32.391,0,44.744
c-12.354,12.365-32.386,12.365-44.745,0l-194.29-194.281C100.226,242.115,97.141,234.018,97.141,225.92z"></path></svg>
</span>
<span class="sr-only">
<svg viewBox="0 0 451.847 451.847"><path d="M97.141,225.92c0-8.095,3.091-16.192,9.259-22.366L300.689,9.27c12.359-12.359,32.397-12.359,44.751,0
c12.354,12.354,12.354,32.388,0,44.748L173.525,225.92l171.903,171.909c12.354,12.354,12.354,32.391,0,44.744
c-12.354,12.365-32.386,12.365-44.745,0l-194.29-194.281C100.226,242.115,97.141,234.018,97.141,225.92z"></path></svg>
</span>
</a>
<a class="u-absolute-vcenter u-gallery-nav u-gallery-nav-next u-grey-70 u-icon-circle u-opacity u-opacity-70 u-spacing-10 u-text-white u-gallery-nav-2" href="#" role="button">
<span aria-hidden="true">
<svg viewBox="0 0 451.846 451.847"><path d="M345.441,248.292L151.154,442.573c-12.359,12.365-32.397,12.365-44.75,0c-12.354-12.354-12.354-32.391,0-44.744
L278.318,225.92L106.409,54.017c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.391-12.359,44.75,0l194.287,194.284
c6.177,6.18,9.262,14.271,9.262,22.366C354.708,234.018,351.617,242.115,345.441,248.292z"></path></svg>
</span>
<span class="sr-only">
<svg viewBox="0 0 451.846 451.847"><path d="M345.441,248.292L151.154,442.573c-12.359,12.365-32.397,12.365-44.75,0c-12.354-12.354-12.354-32.391,0-44.744
L278.318,225.92L106.409,54.017c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.391-12.359,44.75,0l194.287,194.284
c6.177,6.18,9.262,14.271,9.262,22.366C354.708,234.018,351.617,242.115,345.441,248.292z"></path></svg>
</span>
</a>
</div>
</div>
</section>