for the life of me i cant figure out how to build a simple, animated logo carousel.
i found this html/css/js example: https://codepen.io/mdashikar/pen/VWPvgE
thats exactly what i want. How do i copy this over to my site?
or is there a similar app? or a way to make the built-in image slider really slide by itself?
Hi! This functionality can be achieved without code. You can add a Slider gallery to your page and set up the animation in its settings.
For further support on setting up a gallery, please contact us at https://www.wix.com/contact/en
@anhelinak
it only works when you hover the cursor over the arrow.
how to arrange the logos to move continuously without touching the arrows?
Hot to create such a functionality?
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<style>
h2{
text-align:center;
padding: 20px;
}
/* Slider */
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{clear: both;}
.slick-loading .slick-track
{visibility: hidden;}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{float: right;}
.slick-slide img
{display: block;}
.slick-slide.slick-loading img
{display: none;}
.slick-slide.dragging img
{pointer-events: none;}
.slick-initialized .slick-slide
{display: block;}
.slick-loading .slick-slide
{visibility: hidden;}
.slick-vertical .slick-slide
{ display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
</style>
<script>
$(document).ready(function(){
$('.customer-logos').slick({
slidesToShow: 6,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1500,
arrows: false,
dots: false,
pauseOnHover: false,
responsive: [{
breakpoint: 768,
settings: {
slidesToShow: 4
}
}, {
breakpoint: 520,
settings: {
slidesToShow: 3
}
}]
});
});
</script>
<div class="container">
<h2>Our Partners</h2>
<section class="customer-logos slider">
<div class="slide"><img src="https://image.freepik.com/free-vector/luxury-letter-e-logo-design_1017-8903.jpg"></div>
<div class="slide"><img src="https://image.freepik.com/free-vector/3d-box-logo_1103-876.jpg"></div>
<div class="slide"><img src="https://image.freepik.com/free-vector/blue-tech-logo_1103-822.jpg"></div>
<div class="slide"><img src="https://image.freepik.com/free-vector/colors-curl-logo-template_23-2147536125.jpg"></div>
<div class="slide"><img src="https://image.freepik.com/free-vector/abstract-cross-logo_23-2147536124.jpg"></div>
<div class="slide"><img src="https://image.freepik.com/free-vector/football-logo-background_1195-244.jpg"></div>
<div class="slide"><img src="https://image.freepik.com/free-vector/background-of-spots-halftone_1035-3847.jpg"></div>
<div class="slide"><img src="https://image.freepik.com/free-vector/retro-label-on-rustic-background_82147503374.jpg"></div>
</section>
</div>
Of course much more coding will be needed to make this example → INTERACTIVE!
Thanks, it works perfectly
@design13004
Do not forget to like it → if you really liked it 
Can we use it with dynamic values from database?
Can we use it with dynamic values from database?
Yes you can.
How do you get this to play without pausing between each logo? So it just continually scrolls and never stops
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Continuous Scrolling</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.container {
width: 100vw;
overflow: hidden;
}
.scroll-wrapper {
display: flex;
white-space: nowrap;
animation: scrollAnimation 10s linear infinite;
}
.customer-logos {
display: flex;
}
.customer-logos img {
flex: 0 0 auto;
width: 300px; /* Adjust the width of each image as needed */
margin: 0 10px; /* Adjust the margin between images as needed */
}
@keyframes scrollAnimation {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-110%);
}
}
</style>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<div class="container">
<div class="scroll-wrapper">
<div class="customer-logos">
<img src="https://image.freepik.com/free-vector/luxury-letter-e-logo-design_1017-8903.jpg">
<img src="https://image.freepik.com/free-vector/3d-box-logo_1103-876.jpg">
<img src="https://image.freepik.com/free-vector/colors-curl-logo-template_23-2147536125.jpg">
<img src="https://image.freepik.com/free-vector/abstract-cross-logo_23-2147536124.jpg">
<img src="https://image.freepik.com/free-vector/football-logo-background_1195-244.jpg">
<img src="https://image.freepik.com/free-vector/blue-tech-logo_1103-822.jpg">
<img src="https://image.freepik.com/free-vector/background-of-spots-halftone_1035-3847.jpg">
</div>
</div>
</div>
</body>
</html>
How do you make it responsive?