我无法弄清楚如何让这个事件滑块工作
我对这个滑块有一些要求。
要求：
我已经编辑了一些代码。让我知道你的想法
https://i.stack.imgur.com/xnJ8v.jpg
JS：
var mySlide = document.getElementsById('event-slider');
var slideArray = [slide-one, slide-two, slide-three, slide-four, slide-five]
var slideIndex = 1;
var currentDay = document.getElementsById('day-slider');
var dayArray = [day-one, day-two, day-three, day-four, day-five, day-six, day-seven, day-eight, day-nine, day-ten, day-eleven, day-twelve]
var dayIndex = 1;
// This function replaces classes from the slides and days.
function changeslide() {
mySlide.setAttribute("class", slideArray[slideIndex]);
slideIndex++;
currentDay.setAttribute("class", slideArray[dayIndex]);
dayIndex++
if (slideIndex > 4) { slideIndex = 0; }
if (dayIndez > 4) { dayIndex = 0; }
}
// This function checks of the day date is outdated.
function checkDate() {
var dateString = document.getElementById('day-slider').value;
var myDate = new Date(dateString);
var today = new Date();
if (myDate > today) {
return true;
}
return false;
}
if (checkDOB = false) {
$(dayArray[dayIndex]).addClass("outdated");
}
if (checkDOB = true) {
$(dayArray).addClass("current-day");
}
HTML：
<div class="container">
<div class="row">
<div class="row row-margin-lg">
<h1 class="italic add-margin-left">
<b> Evenementen
<span class="decathlon-blue"> per winkel </b>
</span>
</h1>
</div>
</div>
<div class="row-margin-slider" <div class="row">
<div class="row navigation-arrows-slider">
<div class="col-6">
<button class="left-arrow" onclick="changeslide">
<i class="fas fa-chevron-circle-left"></i>
</button>
</div>
<div class="col-6">
<button class="right-arrow" onclick="changeslide">
<i class="fas fa-chevron-circle-right"></i>
</button>
</div>
</div>
</div>
<div class="row slideshow-container" id="event-slider">
<div class="row slide-one" id="slide-one" style="display: flex">
<div class="col-8 left-col-slider">
<h2 class="titel-slider uppercase italic"> Decathlon wielerweek </h2>
<h3 class="ondertitel-slider"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat nulla a nisi volutpat,
eget rhoncus velit molestie. Maecenas eget luctus lorem. Phasellus suscipit augue erat. </h3>
<a class="link-slider"> Lees meer ></a>
<div class="row lower-info-slider">
<div class="col-3">
<div class="location-slider">
<b>
<i class="fas fa-map-marker-alt"></i>Apeldoorn</b>
</div>
</div>
<div class="col-3">
<div class="catogory-slider">
<b>
<i class="fas fa-star"></i>Wielrennen</b>
</div>
</div>
</div>
</div>
<div class="col-4 right-col-slider">
<div class="day"> 28 </div>
<div class="month uppercase"> feb</div>
</div>
</div>
<div class="row slide-two" id="slide-two" style="display: none">
<div class="col-8 left-col-slider">
<h2 class="titel-slider uppercase italic"> Decathlon wielerweek </h2>
<h3 class="ondertitel-slider"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat nulla a nisi volutpat,
eget rhoncus velit molestie. Maecenas eget luctus lorem. Phasellus suscipit augue erat. </h3>
<a class="link-slider"> Lees meer ></a>
<div class="row lower-info-slider">
<div class="col-3">
<div class="location-slider">
<b>
<i class="fas fa-map-marker-alt"></i>Apeldoorn</b>
</div>
</div>
<div class="col-3">
<div class="catogory-slider">
<b>
<i class="fas fa-star"></i>Wielrennen</b>
</div>
</div>
</div>
</div>
<div class="col-4 right-col-slider">
<div class="day"> 28 </div>
<div class="month uppercase"> feb</div>
</div>
</div>
<div class="row slide-three" id="slide-three" style="display: none">
<div class="col-8 left-col-slider">
<h2 class="titel-slider uppercase italic"> Decathlon wielerweek </h2>
<h3 class="ondertitel-slider"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat nulla a nisi volutpat,
eget rhoncus velit molestie. Maecenas eget luctus lorem. Phasellus suscipit augue erat. </h3>
<a class="link-slider"> Lees meer ></a>
<div class="row lower-info-slider">
<div class="col-3">
<div class="location-slider">
<b>
<i class="fas fa-map-marker-alt"></i>Apeldoorn</b>
</div>
</div>
<div class="col-3">
<div class="catogory-slider">
<b>
<i class="fas fa-star"></i>Wielrennen</b>
</div>
</div>
</div>
</div>
<div class="col-4 right-col-slider">
<div class="day"> 28 </div>
<div class="month uppercase"> feb</div>
</div>
</div>
<div class="row slide-four" id="slide-four" style="display: none">
<div class="col-8 left-col-slider">
<h2 class="titel-slider uppercase italic"> Decathlon wielerweek </h2>
<h3 class="ondertitel-slider"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat nulla a nisi volutpat,
eget rhoncus velit molestie. Maecenas eget luctus lorem. Phasellus suscipit augue erat. </h3>
<a class="link-slider"> Lees meer ></a>
<div class="row lower-info-slider">
<div class="col-3">
<div class="location-slider">
<b>
<i class="fas fa-map-marker-alt"></i>Apeldoorn</b>
</div>
</div>
<div class="col-3">
<div class="catogory-slider">
<b>
<i class="fas fa-star"></i>Wielrennen</b>
</div>
</div>
</div>
</div>
<div class="col-4 right-col-slider">
<div class="day"> 28 </div>
<div class="month uppercase"> feb</div>
</div>
</div>
<div class="row slide-five" id="slide-five" style="display: none">
<div class="col-8 left-col-slider">
<h2 class="titel-slider uppercase italic"> Decathlon wielerweek </h2>
<h3 class="ondertitel-slider"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat nulla a nisi volutpat,
eget rhoncus velit molestie. Maecenas eget luctus lorem. Phasellus suscipit augue erat. </h3>
<a class="link-slider"> Lees meer ></a>
<div class="row lower-info-slider">
<div class="col-3">
<div class="location-slider">
<b>
<i class="fas fa-map-marker-alt"></i>Apeldoorn</b>
</div>
</div>
<div class="col-3">
<div class="catogory-slider">
<b>
<i class="fas fa-star"></i>Wielrennen</b>
</div>
</div>
</div>
</div>
<div class="col-4 right-col-slider">
<div class="day"> 28 </div>
<div class="month uppercase"> feb</div>
</div>
</div>
<div class="row day-slider" id="day-slider">
<div class="col-1 day-button outdated" id="day-one">
<h4 class="slider-day">28</h4>
<h5 class="slider-month uppercase">MRT</h4>
</div>
<div class="col-1 day-button outdated" id="day-two">
<h4 class="slider-day">16</h4>
<h5 class="slider-month uppercase">OKT</h4>
</div>
<div class="col-1 day-button outdated" id="day-three">
<h4 class="slider-day">03</h4>
<h5 class="slider-month uppercase">DEC</h4>
</div>
<div class="col-1 day-button" id="day-four">
<h4 class="slider-day">14</h4>
<h5 class="slider-month uppercase">JAN</h4>
</div>
<div class="col-1 day-button active" id="day-five">
<h4 class="slider-day">28</h4>
<h5 class="slider-month uppercase">FEB</h4>
</div>
<div class="col-1 day-button" id="day-six">
<h4 class="slider-day">05</h4>
<h5 class="slider-month uppercase">MEI</h4>
</div>
<div class="col-1 day-button" id="day-seven">
<h4 class="slider-day">15</h4>
<h5 class="slider-month uppercase">MEI</h4>
</div>
<div class="col-1 day-button" id="day-eight">
<h4 class="slider-day">22</h4>
<h5 class="slider-month uppercase">JUN</h4>
</div>
<div class="col-1 day-button" id="day-nine">
<h4 class="slider-day">17</h4>
<h5 class="slider-month uppercase">JUL</h4>
</div>
<div class="col-1 day-button" id="day-ten">
<h4 class="slider-day">01</h4>
<h5 class="slider-month uppercase">AUG</h4>
</div>
<div class="col-1 day-button" id="day-eleven">
<h4 class="slider-day">09</h4>
<h5 class="slider-month uppercase">AUG</h4>
</div>
<div class="col-1 day-button" id="day-twelve">
<h4 class="slider-day">06</h4>
<h5 class="slider-month uppercase">SEPT</h4>
</div>
</div>
</div>
</div>
</div>
</div>
CSS：
/*
Theme Name: Sergino Martina
Theme URI: local
Description: Decathlon Testcase
Version: 1.0
Author: Sergino Martina
*/
/*------------------------------------*\
ROWS
\*------------------------------------*/
.row-padding-sm
{
padding: 25px 0px;
}
.row-padding-md
{
padding: 50px 0px;
}
.row-padding-lg
{
padding: 100px 0px;
}
.white
{
background: #fff;
}
.light-gray
{
background: #fafafa;
}
.gray
{
background: #f1f1f1;
}
.row-margin-lg {
margin-top:100px;
margin-bottom:50px;
}
.remove-margin-sm {
margin-left: -25px;
margin-right: 25px;
}
/*------------------------------------*\
COLORS
\*------------------------------------*/
.decathlon-blue {
color: #0082C3;
}
/*------------------------------------*\
ANIMATION Section 1 - homepage
\*------------------------------------*/
/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.4s;
/* background image from colomn 1*/
background-image: url(../IMG/voetbal-bg.jpg);
background-color: #cccccc;
background-repeat: no-repeat;
background-size: cover;
}
.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay:1.2s;
animation-delay: 0.8s;
/* background image from colomn 2*/
background-image: url(../IMG/kamperen-bg.jpg);
background-color: #cccccc;
background-repeat: no-repeat;
background-size: cover;
}
.three {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.2s;
/* background image from colomn 3*/
background-image: url(../IMG/vechtsport-bg.jpg);
background-color: #cccccc;
background-repeat: no-repeat;
background-size: cover;
}
.four {
-webkit-animation-delay: 2.0s;
-moz-animation-delay: 2.0s;
animation-delay: 1.6s;
/* background image from colomn 4*/
background-image: url(../IMG/fietsen-bg.jpg);
background-color: #cccccc;
background-repeat: no-repeat;
background-size: cover;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.box {
/*---make a basic box for sport catogories ---*/
width: 100%;
height: 400px;
position: relative;
margin: 10px;
float: left;
border: none;
padding: 40px 0px;
text-align: center;
}
.img-item {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 50px;
}
.img-item img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.img-item:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.fade-in-2 {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:3s;
-moz-animation-duration:3s;
animation-duration:3s;
}
/*------------------------------------*\
TEXTSTYLES
\*------------------------------------*/
.titel {
font-weight: 700;
font-style: italic;
}
.ondertitel {
font-weight: 400;
font-style: italic;
}
.uppercase {
text-transform: uppercase;
}
.h5, h5 {
font-size: 1.15rem;
}
.h6, h6 {
font-size: 1rem;
}
.rotateText {
/* Safari */
-webkit-transform: rotate(-2deg);
/* Firefox */
-moz-transform: rotate(-2deg);
/* IE */
-ms-transform: rotate(-2deg);
/* Opera */
-o-transform: rotate(-2deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.3);
}
.italic {
font-style: italic;
}
/*------------------------------------*\
Buttons
\*------------------------------------*/
.btn.btn-primary.btn-lg {
padding: 3px 63px 4px 20px;
margin: 28px 0px 0px 130px;
color: black;
background-image: url(../IMG/button.png);
background-color: transparent;
background-repeat: no-repeat;
background-size: contain;
}
.btn.btn-primary.btn-lg:hover {
background-image: url(../IMG/button-hover.png);
background-color: transparent;
background-repeat: no-repeat;
background-size: contain;
}
a {
color: black;
text-decoration: none;
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
.btn-primary {
color: transparent;
background-color: transparent;
border-color: transparent;
}
.btn-primary:hover {
color: transparent;
background-color: transparent;
border-color: transparent;
}
/*------------------------------------*\
CTA
\*------------------------------------*/
.padding-cta {
padding: 20px 10px;
margin-right: 15px;
}
.cta-bg-one {
background-image: url(../IMG/CTA-bg.jpg);
background-color: #cccccc;
background-repeat: no-repeat;
background-size: cover;
border: 0.01pt solid black;
}
/*------------------------------------*\
Slider
\*------------------------------------*/
.slideshow-container {
border: solid 0.1pt;
padding: 0px 15px 0px 15px;
margin-right: 15px;
margin-bottom: 150px;
margin-top: -320px;
}
.row-margin-slider {
margin-top:100px;
margin-bottom:50px;
}
.slide-one {
padding: 0px 30px 30px 30px;
background-image: url(../SLIDER/EVENTS/1.jpg);
background-color: #cccccc;
background-repeat: no-repeat;
background-size: cover;
}
.slide-two {
padding: 0px 30px 30px 30px;
background-image: url(../SLIDER/EVENTS/2.jpg);
background-color: #cccccc;
background-repeat: no-repeat;
background-size: cover;
}
.slide-three {
padding: 0px 30px 30px 30px;
background-image: url(../SLIDER/EVENTS/3.jpg);
background-color: #cccccc;
background-repeat: no-repeat;
background-size: cover;
}
.slide-four {
padding: 0px 30px 30px 30px;
background-image: url(../SLIDER/EVENTS/4.jpg);
background-color: #cccccc;
background-repeat: no-repeat;
background-size: cover;
}
.slide-five {
padding: 0px 30px 30px 30px;
background-image: url(../SLIDER/EVENTS/5.jpg);
background-color: #cccccc;
background-repeat: no-repeat;
background-size: cover;
}
.day {
font-size: 180px;
margin-top: -45px;
margin-left: 80px;
color: white;
opacity: 0.8;
font-weight: 700;
font-style: italic;
}
.month {
font-size: 140px;
margin-top: -90px;
margin-left: 65px;
color: white;
opacity: 0.5;
font-weight: 200;
opacity: 0.8;
font-style: italic;
}
.ondertitel-slider {
font-size: 18px;
padding-right: 200px;
line-height: 1.5;
font-weight: 200;
padding-top: 10px;
padding-bottom: 10px;
color: white;
}
.titel-slider {
font-weight: bold;
color: white;
}
.link-slider {
color: white !important;
}
.left-col-slider {
padding-left: 50px;
margin-top:100px;
}
.right-col-slider {
margin-top: 70px;
}
.day-slider {
margin-left: -15px;
width: 1125px;
}
.day-button {
width: 100%;
height: 130px;
background-color: white;
padding: 5px;
vertical-align: middle;
padding: 20px;
}
.day-button:active {
-webkit-box-shadow: 0px 5px 33px -7px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 33px -7px rgba(0,0,0,0.75);
box-shadow: 0px 0px 33px -7px rgba(0,0,0,0.75);
}
.day-button:hover {
-moz-box-shadow: inset 0 0 10px #0000002a;
-webkit-box-shadow: inset 0 0 10px #0000002a;
box-shadow: inset 0 0 10px #0000002a;
}
.active {
box-shadow: 0 0px 0px 0px white, 0 0px 0px 0px white, 12px 0 12px -4px rgba(31, 73, 125, 0.1), -15px 0 14px -4px rgba(31, 73, 125, 0.1);
z-index: 999;
}
.thin-border{
border: solid black 0.1pt;
}
.add-margin-left{
margin-left:15px;
}
.outdated {
opacity: 0.3;
}
.slider-day {
font-size: 40px;
font-weight: 700;
text-align: center;
color: #0082C3;
}
.slider-month {
font-size: 25px;
margin-top: -10px;
font-weight: 300;
color: #0082C3;
}
.lower-info-slider {
margin-top: 70px;
}
.link-slider {
font-size: 19px;
}
.location-slider {
font-size: 14px;
padding: 10px 0px;
background: white;
text-align: center;
margin-right: 10px;
border-radius: 30px;
color: #0082C3;
}
.catogory-slider {
font-size: 14px;
padding: 10px 0px;
background: white;
text-align: center;
margin-right: 10px;
border-radius: 30px;
color: #0082C3;
margin-left:-15px;
}
.current-day {
background-color: #0082C3;
color: white;
}
/*------------------------------------*\
Icons
\*------------------------------------*/
.fa, .fas {
font-weight: 900;
margin-right: 5px;
}
.right-arrow {
color: white;
font-size: 50px;
margin-left: 490px;
text-shadow: 3px 3px 16px rgba(39,38,52,0.3);
}
.row.navigation-arrows-slider {
margin-top: 220px;
}
.left-arrow {
margin-left: -30px;
font-size: 50px;
color: white;
text-shadow: 3px 3px 16px rgba(39,38,52,0.3);
}
.left-arrow {
background-color: transparent;
border: none;
}
.right-arrow {
background-color: transparent;
border: none;
}