I am trying to make a slider where its content rotates at a specific interval. The code worked fine when it was on click but when I tried to make it automatic, it couldn't work. I don't know where the error exactly is but I think it is in the calling and defining of the functions, any help would be appreciated.
Here is my code:
<script>
var slider = document.getElementById('slider');
var active = document.getElementById('active');
var line1 = document.getElementById('line1');
var line2 = document.getElementById('line2');
var line3 = document.getElementById('line3');
var line4 = document.getElementById('line4');
var line5 = document.getElementById('line5');
var line6 = document.getElementById('line6');
var line7 = document.getElementById('line7');
var line8 = document.getElementById('line8');
var line9 = document.getElementById('line9');
var line10 = document.getElementById('line10');
function fline1() {
line1=function() {
slider.style.transform = 'translateX(0)';
active.style.top = '0px';
}
}
function fline2() {
line2=function() {
slider.style.transform = 'translateX(-10)';
active.style.top = '32px';
}
}
function fline3() {
line3=function() {
slider.style.transform = 'translateX(-20)';
active.style.top = '64px';
}
}
function fline4() {
line4=function() {
slider.style.transform = 'translateX(-30)';
active.style.top = '96px';
}
}
function fline5() {
line5=function() {
slider.style.transform = 'translateX(-40)';
active.style.top = '128px';
}
}
function fline6() {
line6=function() {
slider.style.transform = 'translateX(-50)';
active.style.top = '160px';
}
}
function fline7() {
line7=function() {
slider.style.transform = 'translateX(-60)';
active.style.top = '192px';
}
}
function fline8() {
line8=function() {
slider.style.transform = 'translateX(-70)';
active.style.top = '224px';
}
}
function fline9() {
line9=function() {
slider.style.transform = 'translateX(-80)';
active.style.top = '256px';
}
}
function fline10() {
line10=function() {
slider.style.transform = 'translateX(-90)';
active.style.top = '288px';
}
}
And here is the code that initially worked with the manual rotation:
var slider = document.getElementById('slider');
var active = document.getElementById('active');
var line1 = document.getElementById('line1');
var line2 = document.getElementById('line2');
var line3 = document.getElementById('line3');
var line4 = document.getElementById('line4');
var line5 = document.getElementById('line5');
var line6 = document.getElementById('line6');
var line7 = document.getElementById('line7');
var line8 = document.getElementById('line8');
var line9 = document.getElementById('line9');
var line10 = document.getElementById('line10');
line1.onclick= function() {
slider.style.transform = 'translateX(0)';
active.style.top = '0px';
}
line2.onclick= function() {
slider.style.transform = 'translateX(-10%)';
active.style.top = '32px';
}
line3.onclick= function() {
slider.style.transform = 'translateX(-20%)';
active.style.top = '64px';
}
line4.onclick= function() {
slider.style.transform = 'translateX(-30%)';
active.style.top = '96px';
}
line5.onclick= function() {
slider.style.transform = 'translateX(-40%)';
active.style.top = '128px';
}
line6.onclick= function() {
slider.style.transform = 'translateX(-50%)';
active.style.top = '160px';
}
line7.onclick= function() {
slider.style.transform = 'translateX(-60%)';
active.style.top = '192px';
}
line8.onclick= function() {
slider.style.transform = 'translateX(-70%)';
active.style.top = '224px';
}
line9.onclick= function() {
slider.style.transform = 'translateX(-80%)';
active.style.top = '256px';
}
line10.onclick= function() {
slider.style.transform = 'translateX(-90%)';
active.style.top = '288px';
}
Edit: here is the html of the sliding div:
<div id="slider">
<div class="msg-col">
<h1> {{the_word1}} </h1>
<p class="wCaterory"> word1_category </p>
<p>: to mark or show a difference in : constitute a contrasting element that distinguishes
It has alot of other meanings too but those are enough for today I guess. I mean
I can add some more if you want me to? By the way there are other words comming too.</p>
<a href="">Know it</a>
</div>
<div class="msg-col">
<h1> the_word2 </h1>
<p class="wCaterory"> word1_category </p>
<p>: something for which one is responsible
It has alot of other meanings too but those are enough for today I guess. I mean
I can add some more if you want me to? By the way there are other words comming too.</p>
<a href="">Know it</a>
</div>
<div class="msg-col">
<h1> the_word3 </h1>
<p class="wCaterory"> word1_category </p>
<p>the action or process of negotiating or being negotiated —often used in plural
It has alot of other meanings too but those are enough for today I guess. I mean
I can add some more if you want me to? By the way there are other words comming too.</p>
<a href="">Know it</a>
</div>
<div class="msg-col">
<h1> the_word4 </h1>
<p class="wCaterory"> word1_category </p>
<p>suggestion made to someone to choose something over the others
It has alot of other meanings too but those are enough for today I guess. I mean
I can add some more if you want me to? By the way there are other words comming too.</p>
<a href="">Know it</a>
</div>
<div class="msg-col">
<h1> the_word5 </h1>
<p class="wCaterory"> word1_category </p>
<p>suggestion made to someone to choose something over the others
It has alot of other meanings too but those are enough for today I guess. I mean
I can add some more if you want me to? By the way there are other words comming too.</p>
<a href="">Know it</a>
</div>
<div class="msg-col">
<h1> the_word6 </h1>
<p class="wCaterory"> word1_category </p>
<p>suggestion made to someone to choose something over the others
It has alot of other meanings too but those are enough for today I guess. I mean
I can add some more if you want me to? By the way there are other words comming too.</p>
<a href="">Know it</a>
</div>
<div class="msg-col">
<h1> the_word7 </h1>
<p class="wCaterory"> word1_category </p>
<p>suggestion made to someone to choose something over the others
It has alot of other meanings too but those are enough for today I guess. I mean
I can add some more if you want me to? By the way there are other words comming too.</p>
<a href="">Know it</a>
</div>
<div class="msg-col">
<h1> the_word8 </h1>
<p class="wCaterory"> word1_category </p>
<p>suggestion made to someone to choose something over the others
It has alot of other meanings too but those are enough for today I guess. I mean
I can add some more if you want me to? By the way there are other words comming too.</p>
<a href="">Know it</a>
</div>
<div class="msg-col">
<h1> the_word9 </h1>
<p class="wCaterory"> word1_category </p>
<p>suggestion made to someone to choose something over the others
It has alot of other meanings too but those are enough for today I guess. I mean
I can add some more if you want me to? By the way there are other words comming too.</p>
<a href="">Know it</a>
</div>
<div class="msg-col">
<h1> the_word10 </h1>
<p class="wCaterory"> word1_category </p>
<p>suggestion made to someone to choose something over the others
It has alot of other meanings too but those are enough for today I guess. I mean
I can add some more if you want me to? By the way there are other words comming too.</p>
<a href="">Know it</a>
</div>
</div>
<div class="controller">
<div id="line1"></div>
<div id="line2"></div>
<div id="line3"></div>
<div id="line4"></div>
<div id="line5"></div>
<div id="line6"></div>
<div id="line7"></div>
<div id="line8"></div>
<div id="line9"></div>
<div id="line10"></div>
<div id="active"></div>
</div>
The CSS:
.msg-container{
width: 600px;
height: 320px;
position: absolute;
left: 14%;
top: 57%;
transform: translateY(-50%);
overflow: hidden;
}
#slider{
display: inline-flex;
transition: 2s;
}
.msg-col {
width: 600px;
height:280px;
}
.msg-col h1{
color: #fff;
font-size: 80px;
font-weight: 100;
margin: 10px;
}
.msg-col p{
color: #ddd;
font-size: 15px;
line-height: 25px;
}
.msg-col a{
display: inline-block;
text-decoration: none;
color: #555;
background: #fff;
font-size: 15px;
padding: 10px 35px;
border-radius: 30px;
margin-top:25px;
}
.controller {
width: 1px;
height: 320px;
display: block;
background: #c0c0c0;
position: absolute;
top: 55%;
right: 50px;
transform: translateY(-50%);
}
#line1,#line2, #line3, #line4, #line5, #line6, #line7, #line8, #line9,
#line10 {
height: 32px;
width: 10px;
cursor: pointer;
transform: translateX(-50%);
}
#active{
width: 5px;
height: 32px;
border-radius: 10px;
background: #fff;
position: absolute;
top:0;
transform: translateX(-50);
}
You could achieve what you want like this
function Slider(id,slideWidth,animationDuration,animationDelay)
{
let interval;
let slider = document.getElementById(id);
let slides = slider.children;
for(let slide of slides)
{
slide.style.width = `${slideWidth}vw`;
}
slider.style.transition = `transform ${animationDuration}ms`;
let slidesCount = slider.children.length;
let position = 1;
return {
startSlider()
{
let interval = setInterval(()=>{
slider.style.transform = `translateX(-${position * slideWidth}vw)`;
position = slidesCount - 1 == position ? 0 : position + 1;
},animationDelay);
}
};
}
let slider = Slider("slider",50,2000,4000);
slider.startSlider();body,html
{
margin:0;
padding:0;
overflow-x:hidden;
}
#slider{
width:10000px;
display:flex;
overflow:hidden;
}
.msg-col
{
padding:20px;
}
.msg-col h1{
font-size: 20px;
font-weight: 100;
margin-bottom: 10px;
}
.msg-col p{
color: #ddd;
font-size: 15px;
line-height: 25px;
}
.msg-col a{
display: inline-block;
text-decoration: none;
color: #555;
background: #fff;
font-size: 15px;
border-radius: 30px;
margin-top:25px;
}<div id="slider">
<div class="slide">
<div class="msg-col">
<h1>The word 1</h1>
<p class="wCaterory"> word1_category </p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unk nown printer took a galley of type and scrambled it to make a type specimen book
</p>
<a class="navigation" href="">Know it</a>
</div>
</div>
<div class="slide">
<div class="msg-col">
<h1>The word 2</h1>
<p class="wCaterory"> word2_category </p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unk nown printer took a galley of type and scrambled it to make a type specimen book
</p>
<a class="navigation" href="">Know it</a>
</div>
</div>
<div class="slide">
<div class="msg-col">
<h1>The word 3</h1>
<p class="wCaterory"> word3_category </p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unk nown printer took a galley of type and scrambled it to make a type specimen book
</p>
<a class="navigation" href="">Know it</a>
</div>
</div>
<div class="slide">
<div class="msg-col">
<h1>The word 4</h1>
<p class="wCaterory"> word3_category </p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unk nown printer took a galley of type and scrambled it to make a type specimen book
</p>
<a class="navigation" href="">Know it</a>
</div>
</div>
<div class="slide">
<div class="msg-col">
<h1>The word 5</h1>
<p class="wCaterory"> word3_category </p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unk nown printer took a galley of type and scrambled it to make a type specimen book
</p>
<a class="navigation" href="">Know it</a>
</div>
</div>
<div class="slide">
<div class="msg-col">
<h1>The word 6</h1>
<p class="wCaterory"> word3_category </p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unk nown printer took a galley of type and scrambled it to make a type specimen book
</p>
<a class="navigation" href="">Know it</a>
</div>
</div>
</div>With the function i made you can specify the width of slides, animation duration and delay, and it works automatically. It uses a simple js function, being the slider mostly based on css. It has a container with huge width so it can put all the slides inline and rotate them through transform:translate.