Simple Carousel – Sergei Ermilov

Simple Carousel for Adverts by Sergei Ermilov with HTML, CSS and JavaScript. Don’t forget to include jQuery.

Contents hide

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Carousel with Javascript</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
	
	<div class="ads-title">
		<a href="/ads/">Ads</a>
	</div>
    <div class="carousel_container">
        <button class="carousel-button" id="prev">&larr;</button>
        <button class="carousel-button" id="next">&rarr;</button>
        <div id="carousel_window">
            <div class="slide" id="1">
            	<p><span>Skillbox course</span></p>
                <h3>C++ Developer Profession from scratch</h3>
                <p><img src="https://arduinoplus.ru/static/svg/c-plus-plus.svg"> Get a C++ developer profession: you will learn to understand the principles of development, write code, use third-party tools and understand documentation.</p>
                <p><a href="https://skillbox.ru/course/profession-c-plus-plus/" target="_blank">Sign up for a course</a></p>
            </div>
            <div class="slide" id="2">
                <h3>Курсы 2</h3>
                <p>Курсы Skillbox</p>
                <p><a href="#">Купить</a></p>
            </div>
            <div class="slide" id="3">
                <h3>Курсы 3</h3>
                <p>Курсы Skillbox</p>
                <p><a href="#">Купить</a></p>
            </div>
            <div class="slide" id="4">
                <h3>Курсы 4</h3>
                <p>Курсы Skillbox</p>
                <p><a href="#">Купить</a></p>
            </div>
            <div class="slide" id="5">
                <h3>Курсы 5</h3>
                <p>Курсы Skillbox</p>
                <p><a href="#">Купить</a></p>
                </d>
            </div>
        </div>

    <script src="./jquery/jquery-3-5-1.min.js"></script>
    <script src="./app.js"></script>
</body>
</html>

CSS

body {
    font-family: Arial, Tahoma;
}
.ads-title {
    max-width:560px;
    margin:0 auto;
    font-size:.9em;
    margin-bottom: 5px;    
}
.ads-title a{
    color:#565656;
    border:0;
    text-decoration: none
}
.ads-title a:hover{
    color:#000;
    border:0;
    text-decoration: none
}
.carousel_container {    
    display: flex;
    align-items: center;
    justify-content: center;
    width: 700px;
    margin: auto;
}

#carousel_window {
    display: flex;
    align-items: center;
    /*justify-content: flex-start;*/
    width: 560px;
    /*height: 200px;*/
    border: 1px solid rgba(0, 0, 0, 0.16);
    margin: 0 auto;
    overflow-x: hidden;

    order: 2
}

.slide {
    flex: 0 0 520px;
    /*display: flex;*/
    background: #fff;
    /*min-height: 80px;*/
    margin: 20px 20px 10px;
    font-size: 17px;
    font-family: arial;
    color: #000;
    /*align-items: center;
    justify-content: center;*/
    position: relative;

    left: 0;
    transition: left 0.2s;
}
.slide h3{
    margin:0;
    padding:0;
}
.slide p:first-child{margin:0;padding:0;}
.slide p span{color:#565656;font-weight: 600}
.slide p{font-size:.8em;line-height:1.5em}
.slide p img{float:left;width:64px;height:64px;margin-right:10px}

.carousel-button {
    width: 50px;
    height: 50px;
    display: block;
    border-radius: 50px;
    border: 1px solid rgba(0, 0, 0, .16);
    background: none;
    outline: none;
    color: #000;
    cursor: pointer;
}

#prev {
    order: 1;
}

#next {
    order: 3;
}

@media (max-width:768px) {

    .ads-title {
    max-width:400px;}

    .carousel_container {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 540px;
        margin: auto;
    }

    #carousel_window {
        display: flex;
        align-items: center;
        /*justify-content: flex-start;*/
        width: 400px;
        /*height: 200px;*/
        border: 1px solid rgba(0, 0, 0, 0.16);
        margin: 0 auto;
        overflow-x: hidden;

        order: 2
    }

    .slide {
        flex: 0 0 360px;
        /*display: flex;*/
        background: #fff;
        /*min-height: 80px;*/
        margin: 20px 20px 10px;
        font-size: 17px;
        font-family: arial;
        color: #000;
        /*align-items: center;
  justify-content: center;*/
        position: relative;

        left: 0;
        transition: left 0.2s;
    }

    .carousel-button {
        width: 50px;
        height: 50px;
        display: block;
        border-radius: 50px;
        border: 1px solid rgba(0, 0, 0, 0.16);
        background: none;
        outline: none;
        color: #000;
        cursor: pointer;
    }

    #prev {
        order: 1;
    }

    #next {
        order: 3;
    }
}

@media (max-width:425px) {

    .ads-title {
    max-width:280px;

    .carousel_container {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 400px;
        margin: auto;
    }

    #carousel_window {
        display: flex;
        align-items: center;
        /*justify-content: flex-start;*/
        max-width: 280px;
        /*height: 200px;*/
        border: 1px solid rgba(0, 0, 0, 0.16);
        margin: 0 auto;
        overflow-x: hidden;

        order: 2
    }

    .slide {
        flex: 0 0 250px;
        /*display: flex;*/
        background: #fff;
        /*min-height: 80px;*/
        margin: 15px 15px 10px;
        font-size: 17px;
        font-family: arial;
        color: #000;
        /*align-items: center;
  justify-content: center;*/
        position: relative;

        left: 0;
        transition: left 0.2s;
    }

    .carousel-button {
        width: 50px;
        height: 50px;
        display: block;
        border-radius: 50px;
        border: 1px solid rgba(0, 0, 0, 0.16);
        background: none;
        outline: none;
        color: grey;
        cursor: pointer;
    }

    #prev {
        order: 1;
    }

    #next {
        order: 3;
    }
}

JavaScript

(function() {
    $prev = $('#prev');
    $next = $('#next');
    $carouselWindow = $('#carousel_window');
    $slides = $('.slide');
    var slideCount = $slides.length;
    var step = parseInt($carouselWindow.css('width'));

    $('.carousel-button').on('click', function(e) {
        var dir = $(e.target).attr('id');
        var diff = (dir == "prev") ? step : -(step);

        var currLeft = parseInt($slides.css('left'));
        var newLeft = Math.min(0, currLeft + diff);
        newLeft = Math.max(-((slideCount - 1) * step), newLeft);

        $slides.css('left', newLeft);
    })
})()