svyrydvladymyr / sliders

Sliders

KALCIFER SLIDERS

The slider template is simple and versatile. You can add as many slider blocks to a page as you like. You can also insert in each other without restrictions. The template has five color schemes. You can change each pattern as you like, and you can add your own color scheme.

How to use

The first way using jQuery:

To head:

<link rel="stylesheet" href="sliders/css/style.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

To body:

<div class="slider"></div>
<script> $(".slider").load("sliders/slider.html"); </script>

The second way is to add markup to your document:

<div class="kalcifer_slider blue">
     <p class="title">Title</p>
     <div class="desc">            
        <p>Text</p>
     </div>
     <p class="title">Title</p>
     <div class="desc">
         <p>Text</p>
     </div>
</div> 

About color schemes

Color schemes for each slider can be set individually. To do this, you need to change the color class in the slider. There are the following color schemes: blue, green, red, gray, yellow.

To change to one of the existing color schemes, you need to replace the slider wrapper class.

<div class="kalcifer_slider blue">
    ...
</div> 

You can also create your own color scheme.

Create a color scheme file.

(your_file_name).css

Import into the main color scheme.

@import "templates/name.css";

Change the color scheme styles to the ones that suit you.

.kalcifer_slider.(your_class_name) > .title{
    border: 1px solid #5681bf;
    border-radius: 8px;
    background: #5681bf;
    color: #ffffff;
}

.kalcifer_slider.(your_class_name) > .title:hover{
    background: #628cc9;
}

.kalcifer_slider.(your_class_name) > .desc{
    border: 1px solid #5681bf;
    border-radius: 0px 0px 8px 8px;
    background: #ffffff;
    color: #111111;
}

.kalcifer_slider.(your_class_name) > .title.active{
    border-radius: 8px 8px 0px 0px;
}

.kalcifer_slider.(your_class_name) > .title.active:hover{
    background: #5681bf;
}

Slider with a icon

To see the icon in the slider, you need to add a class icon to the slider wrapper.

<div class="kalcifer_slider blue icon">
    ...
</div> 

See a sample slider

Moved to svyrydvladymyr.github.io/sliders/

Open in Cloud Shell

License

MIT