WebsiteBaker Support (2.13.x) > General Help & Support

Partners logo carousel

<< < (2/2)

sternchen8875:
only a idea....
I built a slider like this for the bakery shop a long time ago. It read the articles and made a slider out of them. And there were various options for the number of images and random display or not. it was a snippet, but a droplet is also no problem

rumen:
Well. I solved the issue like that. It works.

Thanks all!

dbs:
What is your solution?
Maybe other users have the same wish.

rumen:
It is external code that I put in "CODE2" module with all necessary CSS styles inside. Here is the code.


--- Code: ---<style>
* {
margin: 0;
padding: 0;
}
body {
background: #e6ebf1;
/* height: 40vh; */
}
.slider-area h3 {
text-align: center;
/* font-family: impact; */
/* font-size: 60px; */
/* font-weight: 500; */
/* text-transform: uppercase; */
/* letter-spacing: 2px; */
margin: 50px 0 50px 0;
/* color: #fff; */
}
.wrapper {
display: flex;
width: 100%;
margin: 0 auto;
overflow: hidden;
border-radius: 110px;
padding: 1.5rem;
background: #e6ebf1;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.item {
animation: animate 25s alternate linear infinite;
max-width: 100%;
  height: auto;
}
.container:hover .item {
animation-play-state: paused;
}
@keyframes animate {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-400px, 0, 0);
}
}
@media (max-width:767px) {
.slider-area h2 {
font-size: 30px;
}
.wrapper {
width: 95%;
border-radius: 0;
padding: 0;
}
}

</style>


<div class="slider-area">
<h3>Our partners</h3>
<div class="wrapper">
<div class="item"><img alt="" src="https://skylog.bg/media/logotest1.png"></div>
<div class="item"><img alt="" src="https://skylog.bg/media/logotest2.png"></div>
<div class="item"><img alt="" src="https://skylog.bg/media/logotest3.png"></div>
<div class="item"><img alt="" src="https://skylog.bg/media/logotest4.png"></div>
<div class="item"><img alt="" src="https://skylog.bg/media/logotest1.png"></div>
</div>
</div>
<br>
--- End code ---

sternchen8875:
i have a rebuild from the old Swiftgallery and add this Slider as a additional template, it works, butthere is a little bit more to do, for example a switcher for the template or for the output like the switch in the Glossary/Faq-Module. The Swiftgallery reads all pictures from a single folder and display it normalize with a big mainpicture and small thumbs on a side.



or a short video

Navigation

[0] Message Index

[*] Previous page