vladislavaSim/Slider

## Slider
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HW</title>
    <style>
        .carousel {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 50%;
        }
        button {
            width: 50px;
            height: 50px;
            border-radius: 8px;
            border: 1px solid lightblue;
            background: none;
        }
        .prev, .next {
            border-radius: 50%;
        }
        .switch {
            margin: 50px auto 0;
            width: 100px;
        }
        img {
            height: 250px;
            width: 350px;
        }
    </style>
</head>
<body>

<div class="carousel">
    <button class="prev"><</button>
        <img src="" alt="">
        <button class="next">></button>
</div>
    <button class="switch">change mode</button>
<script src="main.js"></script>
</body>
</html>


let images = [
   'https://images.freeimages.com/images/small-previews/338/sunset-over-lake-2-1377767.jpg',
    'https://media.istockphoto.com/photos/picturesque-morning-in-plitvice-national-park-colorful-spring-scene-picture-id1093110112?k=20&m=1093110112&s=612x612&w=0&h=3OhKOpvzOSJgwThQmGhshfOnZTvMExZX2R91jNNStBY=',
    'https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__480.jpg',
    'https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=',
    'https://cdn.pixabay.com/photo/2017/02/08/17/24/fantasy-2049567__480.jpg'
]

class Slider {
    index;
    images;

    constructor(images) {
        this.index = 0;
        this.images = images;
    }
    next() {
        this.index++;
        this.index = this.switching(this.index);
    }
    prev() {
        this.index--;
        this.index = this.switching(this.index)
    }
    switching(index) {
        if(index > this.images.length - 1) {
            return 0
        }
        if(index < 0) {
            return this.images.length - 1;
        }
        return index
    }
    getCurrentImage() {
        return this.images[this.index]
    }
}

class SliderOne extends Slider {

    switching(index) {
        if (index > this.images.length - 1) {
            return this.images.length - 1;
        }
        if (index < 0) {
            return 0;
        }
        return index;
    }
}

let sliders = [
    new Slider(images),
    new SliderOne(images)
];

let index = true;

let slider = sliders[+index];

document.querySelector('img').src = slider.getCurrentImage();


document.querySelector('.prev').addEventListener('click', function () {
    slider.prev();
    document.querySelector('img').src = slider.getCurrentImage();
    console.log('Prev...');
});
document.querySelector('.next').addEventListener('click', function () {
    slider.next();
    document.querySelector('img').src = slider.getCurrentImage();
    console.log('Next...');
});

document.querySelector('.switch').addEventListener('click', function () {
    console.log(slider = sliders[+index])
    index = !index;

});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>HW</title>
	<style>
	.carousel {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 50%;
	}
	button {
	width: 50px;
	height: 50px;
	border-radius: 8px;
	border: 1px solid lightblue;
	background: none;
	}
	.prev, .next {
	border-radius: 50%;
	}
	.switch {
	margin: 50px auto 0;
	width: 100px;
	}
	img {
	height: 250px;
	width: 350px;
	}
	</style>
	</head>
	<body>

	<div class="carousel">
	<button class="prev"><</button>
	<img src="" alt="">
	<button class="next">></button>
	</div>
	<button class="switch">change mode</button>
	<script src="main.js"></script>
	</body>
	</html>




	let images = [
	'https://images.freeimages.com/images/small-previews/338/sunset-over-lake-2-1377767.jpg',
	'https://media.istockphoto.com/photos/picturesque-morning-in-plitvice-national-park-colorful-spring-scene-picture-id1093110112?k=20&m=1093110112&s=612x612&w=0&h=3OhKOpvzOSJgwThQmGhshfOnZTvMExZX2R91jNNStBY=',
	'https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__480.jpg',
	'https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=',
	'https://cdn.pixabay.com/photo/2017/02/08/17/24/fantasy-2049567__480.jpg'
	]

	class Slider {
	index;
	images;

	constructor(images) {
	this.index = 0;
	this.images = images;
	}
	next() {
	this.index++;
	this.index = this.switching(this.index);
	}
	prev() {
	this.index--;
	this.index = this.switching(this.index)
	}
	switching(index) {
	if(index > this.images.length - 1) {
	return 0
	}
	if(index < 0) {
	return this.images.length - 1;
	}
	return index
	}
	getCurrentImage() {
	return this.images[this.index]
	}
	}

	class SliderOne extends Slider {

	switching(index) {
	if (index > this.images.length - 1) {
	return this.images.length - 1;
	}
	if (index < 0) {
	return 0;
	}
	return index;
	}
	}

	let sliders = [
	new Slider(images),
	new SliderOne(images)
	];

	let index = true;

	let slider = sliders[+index];

	document.querySelector('img').src = slider.getCurrentImage();


	document.querySelector('.prev').addEventListener('click', function () {
	slider.prev();
	document.querySelector('img').src = slider.getCurrentImage();
	console.log('Prev...');
	});
	document.querySelector('.next').addEventListener('click', function () {
	slider.next();
	document.querySelector('img').src = slider.getCurrentImage();
	console.log('Next...');
	});

	document.querySelector('.switch').addEventListener('click', function () {
	console.log(slider = sliders[+index])
	index = !index;

	});