JSFiddle - React, Tailwind, and code Playground

by zlojnaxa

HTML

<div id="GALLERY">

	<div id="SLIDE">
		<div class="box">
			<div id="margin"></div>
			<div id="pict_fanta"></div>
			<div id="text_fanta">Апельсиновый вкус</div>
		</div>
		<div class="box">
			<div id="margin"></div>
			<div id="pict_mirinda"></div>
			<div id="text_mirinda">Мандариновый вкус</div>
		</div>
		<div class="box">
			<div id="margin"></div>
			<div id="pict_cola"></div>
			<div id="text_cola">Карамельный вкус</div>
		</div>
	</div>

	<div id="hover_arr_prev"><div id="prev_slide"><div id="switchL"></div></div></div>
	<div id="hover_arr_next"><div id="next_slide"><div id="switchR"></div></div></div>

</div>







<div id="asdfdgdfg"><div id="info2">ИНФО</div><a href="https://yadi.sk/d/mh2FuF0D3KBhwj" target="_blank"><div id="download">Скачать слайдер</div></a></div>
<div id="info">

	Данное описание больше подходит для тех кто плохо разбирается в JS, CSS, HTML. Если вы считаете себя гуру то можете не читать дальше. И так, те кто плохо разбираются в JS, CSS, HTML читайте ниже.<br><br>

	Для начала обязательно подключите jquery, иначе работать слайдер откажется. В данном случае jquery уже подключен.<br><br>
	"Присвоить" значит вместо, например, "rewind = true" написать "rewind = false".<br><br>
	Можно сделать слайдер фиксированной ширины для этого нужно "full_width" присвоить "false", в "frame" прописать какая нужна ширина, ну и в "unit" поставить "px" и обязательно "full_width" присвоить "false".<br>
	Можно сделать слайдер на всю ширину экрана, для этого нужно "full_width" присвоить "true", "frame" и "unit" тогда функционировать не будут (автоматом)- их можно оставлять без изменений.<br>
	Точки добавляются автоматически в зависимочти от того сколько блоков с содержимым. Так же точки можно отключить присвов "marker=false".<br>
	Можно включить или выключить автоматическую прокрутку слайдов прописав в "auto=true"- если нужно включить автопрокрутку, и прописав "auto=false"- если нужно выключить автопрокурутку.<br>
	Слайдером можно управлять с клавиатуры...

CSS

@charset "UTF-8";
html, body{
    color: #000;
    margin: 0px;
    background-color: #2c2e43;
}
/*---------- обязательные стили ----------*/
    #GALLERY{
        width: 100%;
        height: 500px;
        margin: 0px auto 0px auto;
        background-color: #151515;
        overflow: hidden;
        border-radius: 0px;
    }

    #SLIDE{
        height: 100%;
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s cubic-bezier(1, -0.32, 0.5, 1.43);
    }

    #asdasdfffff{
    width: 100%;
    height: 20px;
    position: absolute;
    margin: 470px 0px 0px 0px;
    }

    #POINTS{
        width: 100%;
        height: 25px;
        margin: -30px auto 0px auto;
        float: left;
    }

    .box{
        height: 100%;
        background-color: #151515;
        font-size: 100px;
        font-family: Trebuchet MS;
        color: #ff6c00;
        text-align: center;
        float: left;
    }

    #box_points{
        height: 25px;
        margin: 0px auto 0px 90px;
    }

    .point{
        width: 15px;
        height: 15px;
        margin: 0px 10px 0px 0px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 20px;
        cursor: pointer;
        display: inline-block;
        color: #fff;
        text-align: center;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

    .active{
        width: 20px;
        height: 20px;
        margin: -5px 15px 0px 5px;
        background-color: #FF5722;
        border-radius: 15px;
    }

    #next_slide{
        width: 70px;
        height: 70px;
        float: right;
        margin: 210px 0px 0px 0px;
        cursor: pointer;
        border-radius: 50px;
    }

    #prev_slide{
        width: 70px;
        height: 70px;
        float: left;
        margin: 210px 0px 0px 0px;
        cursor: pointer;
      ...

JavaScript

$(function(){


var rewind = true,                          // перемотка после последнего слайда
    keyboard = true,                        // управление слайдером по нажатию стрелок (направо, налево)
    auto = true,                           // вкл-выкл автослайдер
    interval = 3000,                        // интервал между слайдами (мс)
    marker = true,                          // вкл-выкл точки
    full_width = true,                      // вкл-выкл ширину слайдера 100%
    frame = 1000,                            // ширина поля видимости ()
    unit = 'px';                             // единицы измерения (px, % и т.д.)



var length = $('.box').length;
if(full_width==false){
    var slide_width = length*frame;
    $('#GALLERY').css({width: frame+unit});
    $('#SLIDE').css({width: slide_width+unit});
    $('.box').css({width: frame+unit});
}
if(full_width==true){
    var frame = 100,
        unit = '%',
        slide_width = length*frame;
    window.onresize = resize;
    function resize(){
        width_box = $(window).width();
        $('.box').css({width: width_box});
    }
    width_box = $(window).width();
    $('#SLIDE').css({width: slide_width+unit});
    $('.box').css({width: width_box});
}



var index = 0;
if(index==0){$('#hover_arr_prev').css('margin-top','-1000px');}



if(marker==true){
    $("#GALLERY").append('<div id="POINTS"><div id="box_points"></div></div>');
    $(".box").each(function (index, value){
        $("#box_points").append('<div id="'+index+'" class="point" data-current="'+index+'"></div>');
    });
    $("#0").addClass("active");
}



$('.point').click(function(){
    var data_current = $(this).attr('data-current');
    index = data_current;
    show(index);
});



$('#hover_arr_next').click(function(){
    if(index!==length && rewind==true){index++;}
    if(index!==length-1 && rewind==false){index++;}
    if(index==length && rewind==true){ index=0; }
    show(index);
});
$('#hover_arr_prev').click(function(){
   ...