Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Amazing CSS Carousel with indicators</title>
- <style>
- #bt_left {
- position: absolute;
- top: 200px;
- left: -50px;
- transform: rotateY(0deg);
- width: 30px;
- cursor: pointer;
- }
- #bt_right {
- transform: rotateY(180deg);
- position: absolute;
- top: 200px;
- right: -50px;
- width: 30px;
- cursor: pointer;
- }
- #box {
- width: 800px;
- height: 500px;
- position: absolute;
- left: 50%;
- transform: translate(-50%);
- top: 10px;
- }
- #container {
- width: 800px;
- height: 500px;
- overflow: hidden;
- border: 5px solid maroon;
- }
- .car {
- width: 800px;
- height: 500px;
- }
- #carousel {
- display: flex;
- }
- .clone{
- position:absolute;
- top:0;
- right:0;
- }
- .clone img{
- width:200px;
- }
- </style>
- </head>
- <body>
- <div id='box'>
- <img id='bt_left' onclick='sliderLeft()' src='https://1xpto.netlify.app/icons/left.png' />
- <img id='bt_right' onclick='sliderRight()' src='https://1xpto.netlify.app/icons/left.png' />
- <div id='container'>
- <div id='carousel'>
- <img class='car' src='https://1xpto.netlify.app/pics/1.jpg' />
- <img class='car' src='https://1xpto.netlify.app/pics/3.jpg' />
- <img class='car' src='https://1xpto.netlify.app/pics/4.jpg' />
- <img class='car' src='https://1xpto.netlify.app/pics/7.jpg' />
- <img class='car' src='https://1xpto.netlify.app/pics/car.jpeg' />
- </div>
- </div>
- </div>
- <a class='clone' href='https://www.youtube.com/channel/UCqLpDK0eOsG1eEeF9jOUZkw'><img src='https://1xpto.netlify.app/pics/clone.png'/></a>
- <script>
- a = 0;
- i = 0;
- b = 0;
- car = document.getElementsByClassName('car');
- function sliderLeft() {
- if (a == car.length - 1) {
- i = i + 0;
- carousel.style.marginLeft = i + 'px';
- } else {
- i = i - 800;
- a++;
- b--;
- carousel.style.marginLeft = i + 'px';
- }
- }
- function sliderRight() {
- if (b == 0) {
- i = i + 0;
- carousel.style.marginLeft = i + 'px';
- } else {
- i = i + 800;
- b++;
- a--;
- carousel.style.marginLeft = i + 'px';
- }
- }
- </script>
- </body>
- </htm>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement