Understanding the Loop Property How to Enable and Disable Loop Functionality in Slider Module
The "loop" functionality's task is to loop the slide list. When the last slide is active, the next one is the first slide. Similarly, in the case of the first slide - it is preceded by the last slide. The "loop" property is turned on by default, and the following example shows the behavior of the slider with the property turned off:
<div class="compsoul-slider compsoul-slider-fade">
<article class="compsoul-slide">
<div class="compsoul-slide-content">
<h2 class="compsoul-slide-heading">
<span class="compsoul-slide-title">Loading images does not block page loading!</span>
</h2>
<div class="compsoul-slide-main">Thanks to the Lazy Loading function, only the necessary images are retrieved from the server, saving transfer, server, and connection.</div>
<a class="compsoul-slide-more" href="https://compsoul.dev" target="_blank" title="Web design and creation, online stores, website templates, website modules, and free website templates.">Read more</a>
</div>
<figure class="compsoul-slide-figure">
<img class="compsoul-slide-img" alt="Slide picture"
src="uploads/images/blank.png"
data-src="uploads/images/blog/slider/slide-1.jpg"
>
<noscript>
<img class="compsoul-slide-noscript" src="uploads/images/blog/slider/slide-1.jpg" alt="Slide picture">
</noscript>
</figure>
</article>
<article class="compsoul-slide">
<div class="compsoul-slide-content">
<h2 class="compsoul-slide-heading">
<span class="compsoul-slide-title">Slider adapted for mobile and touch devices!</span>
</h2>
<div class="compsoul-slide-main">The photo show has been adapted for mobile devices and features event handling that will allow you to navigate the slider smoothly.</div>
<a class="compsoul-slide-more" href="https://compsoul.dev" target="_blank" title="Slider adapted for mobile and touch devices!">Read more</a>
</div>
<figure class="compsoul-slide-figure">
<img class="compsoul-slide-img" alt="Slide picture"
src="uploads/images/blank.png"
data-src="uploads/images/blog/slider/slide-2.jpg"
>
<noscript>
<img class="compsoul-slide-noscript" src="uploads/images/blog/slider/slide-2.jpg" alt="Slide picture">
</noscript>
</figure>
</article>
<article class="compsoul-slide">
<div class="compsoul-slide-content">
<h2 class="compsoul-slide-heading">
<span class="compsoul-slide-title">Picture rotator adjusts the background size to the screen width!</span>
</h2>
<div class="compsoul-slide-main">Don't unnecessarily load large pictures on small screens, adjust the picture to the screen width. Shrink the screen now and see for yourself!</div>
<a class="compsoul-slide-more" href="https://compsoul.dev" target="_blank" title="Picture rotator adjusts the background size to the screen width">Read more</a>
</div>
<figure class="compsoul-slide-figure">
<img class="compsoul-slide-img" alt="Slide picture"
src="uploads/images/blank.png"
data-src="uploads/images/blog/slider/slide-3.jpg"
>
<noscript>
<img class="compsoul-slide-noscript" src="uploads/images/blog/slider/slide-3.jpg" alt="Slide picture">
</noscript>
</figure>
</article>
<article class="compsoul-slide">
<div class="compsoul-slide-content">
<h2 class="compsoul-slide-heading">
<span class="compsoul-slide-title">Progress bar with hover pause slideshow feature</span>
</h2>
<div class="compsoul-slide-main">Handling the slideshow with CSS animation? It's easy, just point to the element that will be your progress bar and enjoy simple animations.</div>
<a class="compsoul-slide-more" href="https://compsoul.dev" target="_blank" title="Progress bar with hover pause slideshow feature">Read more</a>
</div>
<figure class="compsoul-slide-figure">
<img class="compsoul-slide-img" alt="Slide image"
src="uploads/images/blank.png"
data-src="uploads/images/blog/slider/slide-4.jpg"
>
<noscript>
<img class="compsoul-slide-noscript" src="uploads/images/blog/slider/slide-4.jpg" alt="Slide image">
</noscript>
</figure>
</article>
<article class="compsoul-slide">
<div class="compsoul-slide-content">
<h2 class="compsoul-slide-heading">
<span class="compsoul-slide-title">Animated Photo Slideshow on a Website</span>
</h2>
<div class="compsoul-slide-main">Create your own animations, customize the look of the slider to match your website, thanks to the simple class CSS system.</div>
<a class="compsoul-slide-more" href="https://compsoul.dev" target="_blank" title="Animated Photo Slideshow on a Website">Read more</a>
</div>
<figure class="compsoul-slide-figure">
<img class="compsoul-slide-img" alt="Slide Photo"
src="uploads/images/blank.png"
data-src="uploads/images/blog/slider/slide-5.jpg"
>
<noscript>
<img class="compsoul-slide-noscript" src="uploads/images/blog/slider/slide-5.jpg" alt="Slide Photo">
</noscript>
</figure>
</article>
<nav class="compsoul-slide-navigation">
<ul>
<li class="compsoul-slide-nav">
<button class="compsoul-slide-point">
<span class="compsoul-slide-hidden">Ładowanie zdjęć nie blokuje wczytywania strony!</span>
</button>
</li>
<li class="compsoul-slide-nav">
<button class="compsoul-slide-point">
<span class="compsoul-slide-hidden">Slider dostosowany do urządzeń mobilnych i dotykowych!</span>
</button>
</li>
<li class="compsoul-slide-nav">
<button class="compsoul-slide-point">
<span class="compsoul-slide-hidden">Rotator zdjęć dostosuje rozmiar tła do szerokości ekranu</span>
</button>
</li>
<li class="compsoul-slide-nav">
<button class="compsoul-slide-point">
<span class="compsoul-slide-hidden">Pasek postępu wraz z funkcją zatrzymania przewijania zdjęć po najechaniu.</span>
</button>
</li>
<li class="compsoul-slide-nav">
<button class="compsoul-slide-point">
<span class="compsoul-slide-hidden">Animowany pokaz zdjęć na stronie WWW</span>
</button>
</li>
</ul>
</nav>
<button class="compsoul-slide-button compsoul-slide-next"><span class="compsoul-slide-hidden">Next slide</span></button>
<button class="compsoul-slide-button compsoul-slide-prev"><span class="compsoul-slide-hidden">Previous slide</span></button>
<div class="compsoul-slide-timeline">
<span class="compsoul-slide-hidden">Timeline</span>
</div>
</div>
.compsoul-slider {
height: 100vh;
overflow: hidden;
position: relative;
}
.compsoul-slide {
display: flex;
flex-flow: column wrap;
justify-content: center;
}
.compsoul-slide-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
overflow: hidden;
padding: 0;
position: absolute;
margin: -1px;
width: 1px;
}
.compsoul-slide-content {
display: inline-flex;
flex-flow: column wrap;
font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
margin: 0 auto 48px;
max-width: 540px;
width: 90%;
}
.compsoul-slide-content .compsoul-slide-heading {
color: #ffffff;
font-size: 32px;
font-weight: 100;
margin: 0 0 21px;
padding: 0;
position: relative;
text-align: center;
z-index: 0;
}
.compsoul-slide-content .compsoul-slide-heading:before {
background: #e7a14f;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
.compsoul-slide-content .compsoul-slide-main {
background: #464972bb;
color: #d7d8ed;
font-size: 18px;
line-height: 1.4;
margin: 0 0 21px;
padding: 21px;
}
.compsoul-slide-content .compsoul-slide-more {
background: #464972;
border-radius: 5px;
color: #d7d8ed;
cursor: pointer;
display: inline-block;
font-size: 18px;
margin: 0 auto;
padding: 8px 16px;
position: relative;
text-decoration: none;
transition: background 0.4s, color 0.4s;
z-index: 0;
}
.compsoul-slide-content .compsoul-slide-more:hover,
.compsoul-slide-content .compsoul-slide-more:focus {
background: #e7a14f;
color: #ffffff;
}
.compsoul-slide {
height: 100%;
left: 0;
position: absolute;
pointer-events: none;
top: 0;
width: 100%;
}
.compsoul-slide.compsoul-active {
z-index: 1;
pointer-events: auto;
}
.compsoul-slide .compsoul-slide-figure {
background: no-repeat center;
background-size: cover;
bottom: 0;
left: 0;
margin: 0;
position: absolute;
right: 0;
top: 0;
z-index: -1;
}
.compsoul-slide .compsoul-slide-img {
display: none;
}
.compsoul-slide-button {
background: #464972;
border: none;
cursor: pointer;
font-size: 2.6px;
height: 16em;
outline: 1px solid #e7a14f00;
padding: 0;
transition: outline 0.4s;
width: 16em;
}
.compsoul-slide-button:focus, .compsoul-slide-button:focus-within {
outline: 1px solid #e7a14fff;
}
.compsoul-slide-next {
right: 0;
position: absolute;
top: 50%;
transform: translate(0, -50%);
z-index: 5;
}
.compsoul-slide-prev {
left: 0;
position: absolute;
top: 50%;
transform: translate(0, -50%);
z-index: 5;
}
.compsoul-slide-next, .compsoul-slide-prev {
cursor: default;
opacity: 0;
text-align: center;
transition: opacity 0.4s, outline 0.4s;
}
.compsoul-slide-next.compsoul-active, .compsoul-slide-prev.compsoul-active {
cursor: pointer;
opacity: 1;
}
.compsoul-slide-next.compsoul-loading, .compsoul-slide-prev.compsoul-loading {
cursor: progress;
}
.compsoul-slide-next:before, .compsoul-slide-prev:before {
border-top: 1em solid #d7d8ed;
border-right: 1em solid #d7d8ed;
box-sizing: content-box;
content: "";
cursor: pointer;
display: inline-block;
height: 4em;
padding: 0 0 1em 1em;
transform: rotate(45deg) translate(-25%, 25%);
transition: opacity 0.4s, border 0.4s;
width: 4em;
}
.compsoul-slide-next:hover:before, .compsoul-slide-prev:hover:before {
border-top: 1em solid #e7a14f;
border-right: 1em solid #e7a14f;
}
.compsoul-slide-next:after, .compsoul-slide-prev:after {
animation: compsoul-loading 1s infinite linear;
animation-play-state: paused;
border-bottom: 1em solid #d7d8ed;
border-left: 1em solid #d7d8ed;
border-right: 1em solid #d7d8ed;
border-top: 1em solid #fff;
border-radius: 100%;
box-sizing: content-box;
content: "";
cursor: pointer;
display: inline-block;
height: 6em;
left: 50%;
opacity: 0;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
transition: opacity 0.4s, border 0.4s;
width: 6em;
}
@keyframes compsoul-loading {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.compsoul-slide-next.compsoul-loading:before, .compsoul-slide-prev.compsoul-loading:before {
opacity: 0;
}
.compsoul-slide-next.compsoul-loading:after, .compsoul-slide-prev.compsoul-loading:after {
animation-play-state: running;
cursor: progress;
opacity: 1;
}
.compsoul-slide-next.compsoul-loading:hover:after, .compsoul-slide-prev.compsoul-loading:hover:after {
border-top: 1em solid #ff0000;
}
.compsoul-slide-prev:before {
transform: rotate(-135deg) translate(-25%, 25%);
}
.compsoul-slide-navigation {
bottom: 21px;
font-size: 0;
left: 50%;
position: absolute;
transform: translate(-50%, 0);
z-index: 5;
}
.compsoul-slide-navigation ul {
margin: 0;
padding: 0;
}
.compsoul-slide-navigation .compsoul-slide-nav {
display: inline-block;
cursor: pointer;
}
.compsoul-slide-navigation .compsoul-slide-nav * {
pointer-events: none;
}
.compsoul-slide-navigation button {
background: none;
border: 0;
box-sizing: content-box;
display: block;
font-size: 1px;
padding: 4em 2em;
}
.compsoul-slide-navigation button:focus, .compsoul-slide-navigation button:focus-within {
outline: none;
}
.compsoul-slide-navigation .compsoul-slide-point {
background: #464972;
border: 1em solid #e7a14f00;
border-radius: 100%;
box-sizing: border-box;
cursor: pointer;
display: block;
height: 20em;
padding: 0;
position: relative;
transition: border 0.2s linear;
width: 20em;
}
.compsoul-slide-navigation .compsoul-active .compsoul-slide-point, .compsoul-slide-navigation button:focus .compsoul-slide-point, .compsoul-slide-navigation button:focus-within .compsoul-slide-point, .compsoul-slide-navigation .compsoul-slide-nav:hover .compsoul-slide-point {
border: 3em solid #e7a14fff;
}
.compsoul-slide-navigation .compsoul-loading button:focus .compsoul-slide-point, .compsoul-slide-navigation .compsoul-loading button:focus-within .compsoul-slide-point, .compsoul-slide-navigation .compsoul-slide-nav.compsoul-loading:hover .compsoul-slide-point {
border: 3em solid #ff0000ff;
}
.compsoul-slide-navigation .compsoul-slide-point:before {
background: #d7d8ed00;
border: 2em solid #d7d8ed;
border-radius: 100%;
box-sizing: border-box;
content: "";
cursor: pointer;
display: inline-block;
height: 10em;
left: 50%;
opacity: 1;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
transition: background 0.4s, opacity 0.4s;
width: 10em;
}
.compsoul-slide-navigation .compsoul-slide-point:after {
animation: compsoul-loading 1s infinite;
animation-play-state: paused;
border-bottom: 2em solid #d7d8ed;
border-left: 2em solid #d7d8ed;
border-right: 2em solid #d7d8ed;
border-top: 2em solid #fff;
border-radius: 100%;
box-sizing: border-box;
content: "";
cursor: pointer;
height: 16em;
left: 50%;
opacity: 0;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
transition: opacity 0.4s;
width: 16em;
}
.compsoul-slide-navigation .compsoul-loading .compsoul-slide-point:before {
opacity: 0;
}
.compsoul-slide-navigation .compsoul-loaded .compsoul-slide-point:before {
background: #d7d8ed;
}
.compsoul-slide-navigation .compsoul-loading .compsoul-slide-point:after {
animation-play-state: running;
opacity: 1;
}
.compsoul-slide-timeline {
height: 3px;
left: 0;
position: absolute;
top: 0;
z-index: 5;
width: 100%;
}
.compsoul-slide-timeline:before {
animation: compsoul-slide-timeline 6s linear forwards;
animation-play-state: paused;
background: #e7a14f;
content: "";
display: block;
height: 100%;
transform: translate(-100%, 0);
width: 100%;
}
.compsoul-slider .compsoul-slide-timeline.compsoul-active:before {
animation-play-state: running;
}
.compsoul-slider:hover .compsoul-slide-timeline:before {
animation-play-state: paused;
}
.compsoul-slide-timeline.compsoul-unset:before {
animation: unset;
}
@keyframes compsoul-slide-timeline {
from {
transform: translate(-100%, 0);
}
to {
transform: translate(0, 0);
}
}
.compsoul-slider-fade .compsoul-slide {
opacity: 0;
will-change: opacity;
z-index: 0;
}
.compsoul-slider-fade .compsoul-slide.compsoul-wait {
opacity: 1;
z-index: 1;
}
.compsoul-slider-fade .compsoul-slide.compsoul-active {
opacity: 1;
transition: opacity 0.4s;
z-index: 2;
}
.compsoul-slider-fade .compsoul-slide.compsoul-first, .compsoul-slider-fade .compsoul-slide.compsoul-previous {
transition: unset;
}
.compsoul-slider-vertical {
overflow: hidden;
}
.compsoul-slider-vertical .compsoul-slide {
background: transparent;
will-change: transform;
}
.compsoul-slider-vertical .compsoul-slide.compsoul-previous {
z-index: 2;
}
.compsoul-slider-vertical .compsoul-slide.compsoul-active {
z-index: 4;
}
.compsoul-slider-vertical .compsoul-slide.compsoul-direction-down {
animation: compsoul-slider-vertical-down 0.4s linear forwards;
}
@keyframes compsoul-slider-vertical-down {
from {
transform: translate(0, -100%);
}
to {
transform: translate(0, 0);
}
}
.compsoul-slider-vertical .compsoul-slide.compsoul-direction-up {
animation: compsoul-slider-vertical-up 0.4s linear forwards;
}
@keyframes compsoul-slider-vertical-up {
from {
transform: translate(0, 100%);
}
to {
transform: translate(0, 0);
}
}
.compsoul-slider-vertical .compsoul-slide.compsoul-first, .compsoul-slider-vertical .compsoul-slide.compsoul-previous {
animation: unset;
}
.compsoul-slider-horizontal {
overflow: hidden;
}
.compsoul-slider-horizontal .compsoul-slide {
background: #ffffff;
will-change: transform;
}
.compsoul-slider-horizontal .compsoul-slide.compsoul-previous {
z-index: 2;
}
.compsoul-slider-horizontal .compsoul-slide.compsoul-active {
z-index: 4;
}
.compsoul-slider-horizontal .compsoul-slide.compsoul-direction-down {
animation: compsoul-slider-horizontal-left 0.4s linear forwards;
}
@keyframes compsoul-slider-horizontal-left {
from {
transform: translate(-100%, 0);
}
to {
transform: translate(0, 0);
}
}
.compsoul-slider-horizontal .compsoul-slide.compsoul-direction-up {
animation: compsoul-slider-horizontal-right 0.4s linear forwards;
}
@keyframes compsoul-slider-horizontal-right {
from {
transform: translate(100%, 0);
}
to {
transform: translate(0, 0);
}
}
.compsoul-slider-horizontal .compsoul-slide.compsoul-first, .compsoul-slider-horizontal .compsoul-slide.compsoul-previous {
animation: unset;
}
@media (max-width: 840px) {
.compsoul-slide-next, .compsoul-slide-prev {
top: auto;
transform: unset;
bottom: 12px;
}
}
<script src="https://compsoul.dev/uploads/js/compsoul.js"></script><script src="https://compsoul.dev/uploads/js/slider.js"></script><script>
new Slider(".compsoul-slider .compsoul-slide").options({
loop: false
}).init();
</script>
Thank You for Reading
We hope you enjoyed this post! If you did, please consider following us on Facebook and leaving a like and a comment. If you have any questions or need assistance, feel free to use our contact form or email us at daniel@compsoul.dev. For urgent inquiries, you can reach us by phone at +48 732 846 416.