index.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Слайдер</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="slidershow-container">
<div class="mySlides fade">
<div class="numbertext">1/3</div>
<img src="img/1.jpg" style="width:100%">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas iusto aspernatur quo.</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2/3</div>
<img src="img/2.jpg" style="width:100%">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias temporibus nihil, quaerat!</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3/3</div>
<img src="img/3.jpg" style="width:100%">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto eaque voluptatibus, doloribus!</div>
</div>
<a onclick="plusSlides(-1)" class="prev">❮</a>
<a onclick="plusSlides(1)" class="next">❯</a>
</div>
<br>
<div style="text-align:center;">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<script src="script.js"></script>
</body>
</html>
style.css
.slideshow-container{
max-width: 1000px;
position: relative;
margin: auto;
}
.prev, .next{
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color:white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.next{
right: 8px;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover{
background-color: rgba(0,0,0,0.8);
}
.mySlides{
text-align: center;
max-height: 700px;
}
.text{
color: #f2f2f2;
font-size: 22px;
padding: 8px 12px;
position: relative;
bottom: 90px;
}
.dot{
cursor: pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color:0.6s ease;
}
.active, .dot:hover{
background-color: #717171;
}
.fade{
-webkit-animation-name: fade;
-webkit-animation-duration:1s;
animation-name:fade;
animation-duration:1s;
}
/*@-webkit-keyframes fade{
0%{opacity:0.4;}
100%{opacity:1;}
}*/
@keyframes fade{
0%{opacity:0.4;}
100%{opacity:1;}
}
script.css
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName('dot');
if(n > slides.length) {
slideIndex = 1;
}
if(n < 1) {
slideIndex = slides.length;
}
for(i=0; i<slides.length; i++) {
slides[i].style.display = "none";
}
for(i=0; i<dots.length; i++) {
dots[i].className = dots[i].className.replace("active","");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className+= " active";
}
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Слайдер</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="slidershow-container">
<div class="mySlides fade">
<div class="numbertext">1/3</div>
<img src="img/1.jpg" style="width:100%">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas iusto aspernatur quo.</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2/3</div>
<img src="img/2.jpg" style="width:100%">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias temporibus nihil, quaerat!</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3/3</div>
<img src="img/3.jpg" style="width:100%">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto eaque voluptatibus, doloribus!</div>
</div>
<a onclick="plusSlides(-1)" class="prev">❮</a>
<a onclick="plusSlides(1)" class="next">❯</a>
</div>
<br>
<div style="text-align:center;">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<script src="script.js"></script>
</body>
</html>
style.css
.slideshow-container{
max-width: 1000px;
position: relative;
margin: auto;
}
.prev, .next{
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color:white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.next{
right: 8px;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover{
background-color: rgba(0,0,0,0.8);
}
.mySlides{
text-align: center;
max-height: 700px;
}
.text{
color: #f2f2f2;
font-size: 22px;
padding: 8px 12px;
position: relative;
bottom: 90px;
}
.dot{
cursor: pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color:0.6s ease;
}
.active, .dot:hover{
background-color: #717171;
}
.fade{
-webkit-animation-name: fade;
-webkit-animation-duration:1s;
animation-name:fade;
animation-duration:1s;
}
/*@-webkit-keyframes fade{
0%{opacity:0.4;}
100%{opacity:1;}
}*/
@keyframes fade{
0%{opacity:0.4;}
100%{opacity:1;}
}
script.css
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName('dot');
if(n > slides.length) {
slideIndex = 1;
}
if(n < 1) {
slideIndex = slides.length;
}
for(i=0; i<slides.length; i++) {
slides[i].style.display = "none";
}
for(i=0; i<dots.length; i++) {
dots[i].className = dots[i].className.replace("active","");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className+= " active";
}
Комментариев нет:
Отправить комментарий