My image carousel randomly doesn't work, sometimes refreshing fixes it, sometimes it doesn't

user_19986271 0
Viewed 38

My image carousel randomly doesnt work, sometimes when i refresh, it starts working. However, the textFade function inside the same carousel always works and it is linked to the same counter. Here are some gifs of my issue:

https://gyazo.com/f94fecd0ce497838699900be07c55a83

https://gyazo.com/c3fc2be324e426a03891f433cdae6ef5

I am not sure how i can make the images from my code show on this question, i have tried to google how to upload the library on to the question, but i have not been able to find a solution.

I am making this for a job application so any help would be deeply appreciated.

// SLIDER

const allSlides = document.querySelector(".slide");
const allImages = document.querySelectorAll(".slide img");

const prev = document.querySelector("#prevBtn");
const next = document.querySelector("#nxtBtn");

let counter = 0; 
const size = allImages[0].clientWidth;


next.addEventListener('click', ()=>{
    if(counter >= allImages.length - 1){
        allSlides.style.transform = 'translateX(0px)';
        counter = 0;
        textFade();
    } else {
    allSlides.style.transition = "transform 0.4s ease-in-out";
    counter++
    allSlides.style.transform = 'translateX(' + (-size * counter) + "px)";
    textFade();
    }
    
})
prev.addEventListener('click', ()=>{
    if(counter <= 0 ){
        allSlides.style.transform = 'translateX(' + (size * 3) + "px)";
        counter = 3;
        textFade();
    }
    allSlides.style.transition = "transform 0.4s ease-in-out";
    counter--
    allSlides.style.transform = 'translateX('+(-size * counter) + "px)";
    textFade();
})
* {
    box-sizing: border-box;
    font-family: 'Times New Roman', Times, serif;
    margin: 0;
    padding: 0;
}

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;    
}

/* HEADER */
.navbar-container {
    width: 83.5%;
    background-color: black;
    margin: auto;
    padding: 2.2vw 0;
    height: 14.1vw;
}

.header-subcontainer {
    display: flex;
    justify-content: space-between;
    width: 71vw;
    margin: auto;
    position: relative;
    z-index: 999;
}

.menu-tab{
    visibility: hidden;
    position: absolute;
}

.header-container {
    width: 80%;
}

.logo-container img{  
    width: 21vw;
}

.navbar-social {
    padding: 0 .45vw 0 .35vw;
    height: .7vw;
    margin-bottom: -.3vw;
}

.navbar-social:last-of-type {
    padding-right: 0;
}

.link-container {
    display:flex;
    justify-content: right;
    width: 60%;
    margin: -1vw 0 0 27.15vw;
    position: relative;
   
}

.links {
    text-decoration: none;
    color:white;
    margin-left: 1.7vw;
    display: inline-block;
    font-size: 1vw;
    cursor: default;
}

.links:after {
    display: block;
    content: '';
    border-bottom: 1px solid #ffffff;
    transform: scaleX(0);
    transition: transform 200ms ease-in-out;
    transform-origin: 0% 50%;
}

.links:hover:after {
    transform: scaleX(1); transform-origin:   0% 50%;
}

.header-container {
    width: 100%;
    height: 2vw;
    text-align: right;
    margin-top: -.8vw;
}

/* ------- SEARCH ------- */

.searchbar {
    color: white;
    background: none;
    border: none;
    border-bottom: 2px solid grey;
    padding-left: 1.1vw;
    padding-bottom: .3vw;
    margin-right: 1vw;
    margin-left: -.5vw;
    width: 100%;
    height: 1vw;
    font-size: .7vw;
}

.mobile-searchbar {
    visibility: hidden;
    position: absolute;
}

.search-box{
    display: inline-block;
    width: 20.8%;
    z-index: 100;
}
#hidden-search {
    left: 0;
}

#myUL {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
  
#myUL li{
    border-bottom: 2px solid #1f1f1f;
}

#myUL li a {   
    margin-top: -1px; /* Prevent double borders */   
    padding: 1vw 0 1vw 0;
    text-decoration: none;
    font-size: .7vw;
    color: white;
    display: block
}

.search-content{
    width: 16.6vw;
    text-align: left;
    margin-top: 0px;
    background-color: black;
    outline: 1px solid #707070;
    padding: 0 1vw 2vw 1vw;
    color: white;
    position: absolute;
    visibility: hidden;
    z-index: 100;
    margin-left: 18.45vw;
}

#myUL h2 {
    font-weight: normal;
    padding-bottom: .5vw;
}

#myUL span{
    font-size: .9vw;
    line-height: 1.2vw;
}

::placeholder {
    color: white;
}

.search-icon {
    position: absolute;
    width: .7vw;
    margin-left: -.5vw;
    margin-top: .2vw;
}

.second-search-icon{
    position: absolute;
    visibility: hidden;
}
input:focus {
    outline: none;
}

/*------- SLIDER -------*/

.slider-container {
    width: 71vw;
    height: 40vw;
    margin: auto;
    margin-top: -6.49vw;
    z-index: 2;
}

.slider {
    margin: auto;   
    overflow: hidden;
    width: 100%;
    height: 30vw;
}

.slide {
    display: flex;
    width: 100%;
    height: 100%;
}

#prevBtn {
    background-image: url(assets/images/arrow-left.svg);
    background-size: cover;
    width: 1.5vw;
    height: 1.5vw;
    border: none;
    background-color: rgba(255, 255, 255, 0);
    position: relative;
    left: 67vw;
    top: 1.2vw;
    cursor: pointer;
} 

#nxtBtn {
    background-image: url(assets/images/arrow-right.svg);
    background-size: cover;
    width: 1.5vw;
    height: 1.5vw;
    border: none;
    background-color: white;
    position: relative;
    left: 67.8vw;
    top: 1.2vw;
    cursor: pointer;
}

.sub-slider {
    width: 41.45vw;
    background-color: black;
    color: white;
    margin-left: 5.8vw;
    font-size: 1.7vw;
    line-height: 2.2vw;
    padding: 3.8vw 4vw;
    margin-top: -6vw;
    position: relative;
    opacity: 100%;
    transition: opacity 300ms;
    z-index: 4;
}

.sub-slider-2 {
    width: 41.45vw;
    background-color: black;
    color: white;
    margin-left: 5.8vw;
    font-size: 1.7vw;
    line-height: 2.2vw;
    padding: 3.8vw 4vw;
    margin-top: -6vw;
    position: relative;
    top: -6vw;
    opacity: 0%;
    transition: opacity 300ms;
    z-index: 4;
}

.sub-slider-3 {
    width: 41.45vw;
    background-color: black;
    color: white;
    margin-left: 5.8vw;
    font-size: 1.7vw;
    line-height: 2.2vw;
    padding: 3.8vw 4vw;
    margin-top: -6vw;
    position: relative;
    top: -12vw;
    opacity: 0%;
    transition: opacity 300ms;
    z-index: 4;
}

.sub-slider-background {
    width: 41.45vw;
    background-color: black;
    color: black;
    margin-left: 5.8vw;
    font-size: 1.7vw;
    line-height: 2.2vw;
    padding: 3.8vw 4vw;
    margin-top: -24vw;
    position: relative;
    z-index: 3;
}

.close-menu {
    position: absolute;
    visibility: hidden;
}

.hidden-social {
    position: absolute;
    visibility: hidden;
}
<!DOCTYPE html>
<html lang="en">
<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">
    <link rel="stylesheet" href="styles.css">
    
    <title>World Barista Cup</title>
</head>
<body>
    <div id="overlay">


<!-- HEADER -->
    <header class="navbar-container">
        <div class="header-subcontainer">
            <div class="logo-container">
                <img src="assets/images/logo-white.png" alt="">
            </div>
            <div class="header-container">               
                <img class="search-icon" src="assets/images/search.svg" id="search-icon" alt="" onclick="rotateSearchIcon();showData();" >
                <img src="assets/images/menu_tab.png" alt="" class="menu-tab" id="menu-tab" onclick="show_menu()">
                <img src="assets/images/close.svg" alt="" class="close-menu" id="close-menu" onclick="close_menu()">
                <div class="search-box">
                    <input type="text" id="myInput" name="text" onkeyup="searchFunction()" onclick="showData()" class="searchbar" placeholder="search">
                    <div class="search-content" id="hidden-search">
                        <ul id="myUL">
                            <img class="second-search-icon" src="assets/images/search.svg" alt="">
                            <input type="text" id="mobile-search-input" name="text" onkeyup="searchFunctionMobile()" class="mobile-searchbar" placeholder="search">
                            <li><a href="#" onclick="firstPopup()">
                                <h2>Wonderful Copenhagen 2021</h2>
                                <span class="search-publish">Published 12/0/21<br></span>
                                <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit ipsam officia mini...</span>
                            </a></li>
                            
                            <li><a href="#" onclick="secondPopup()">
                                <h2>The most expensive coffee on the market</h2>
                                <span class="search-publish">Published 12/0/21<br></span>
                                <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit ipsam officia mini...</span>
                            </li></a>
                            <li><a href="#" onclick="thirdPopup()">
                                <h2>10 types of coffee beans you need to know</h2>
                                <span class="search-publish">Published 12/0/21<br></span>
                                <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit ipsam officia mini...</span>
                            </a></li>
                                
                            <li><a href="#" onclick="fourthPopup()">
                                <h2>Challenge your barista skills to the max</h2>
                                <span class="search-publish">Published 12/0/21<br></span>
                                <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit ipsam officia mini...</span>
                            </a></li>
                        </ul>
                    </div>
                </div>
                <img class="navbar-social" src="assets/images/linkedin-white.svg" alt="">
                <img class="navbar-social" src="assets/images/twitter-white.svg" alt="">
                <img class="navbar-social" src="assets/images/instagram-white.svg" alt="">
                <img class="navbar-social" src="assets/images/facebook-white.svg" alt="">
                <br>
            </div>
        </div>

<!-- MOBILE MENU -->
        <div class="link-container">
            <nav id="hidden-menu">
                <div>
                    <a href="/" class="links">About us</a>
                    <a href="/" class="links">Events</a>
                    <a href="/" class="links">Nordic roaster</a>
                    <a href="/" class="links">Results</a>
                    <a href="/" class="links">Links</a>
                    <a href="/" class="links">Contact</a>
                    <div class="hidden-social">
                        <img class="menu-social" src="assets/images/linkedin-white.svg" alt="">
                        <img class="menu-social" src="assets/images/twitter-white.svg" alt="">
                        <img class="menu-social" src="assets/images/instagram-white.svg" alt="">
                        <img class="menu-social" src="assets/images/facebook-white.svg" alt="">
                    </div>

                </div>

            </nav>
        </div>
    </header>


<!-- SLIDER -->
    <section class="slider-container">
        <div class="slider">
            <div class="slide">
                <img src="assets/images/Coffee_1.png"  alt="">
                <img src="assets/images/Coffee_2.png"  alt="">
                <img src="assets/images/Coffee_3.png"  alt="">
            </div>            
        </div>
        <button id="prevBtn"></button>
        <button id="nxtBtn"></button>
        <div class="sub-slider" id="slide-text-1">
            <p>"To create an environment in which knowledge about coffee and its sphere can be obtained"</p>
        </div>   
        <div class="sub-slider-2" id="slide-text-2">
            <p>"This is a great introduction to the coffee industry's best beans on the planet"</p>
        </div>   
        <div class="sub-slider-3" id="slide-text-3">
            <p>"Coffee in code out, this is the way of eternal life and empowerment of the soul"</p>
        </div>
        <div class="sub-slider-background">
            <p>"Coffee in code out, this is the way of eternal life and empowerment of the soul"</p>
        </div>  
    </section>

css html javascript
2 Answers

I suspect it has to do with the JS.

The easiest way I know how to set up the plus/minus arrows for the slidshow is this:

HTML

<!-- Next and previous buttons -->
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>

CSS

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

JS

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}
user_113149080

For some reason when the page loads for the first time const size = allImages[0].clientWidth; returns 0.only gets the value on refreshing. so what i did was instead of const i wrote let size=""; let size be empty string then i am assigning the value inside the button which seems to work.have no idea why it doesnt do it the first time.

and i changed the images for here and your buttons were empty,also changed the css of .slider:width to 50%

// SLIDER

const allSlides = document.querySelector(".slide");
const allImages = document.querySelectorAll(".slide img");

const prev = document.querySelector("#prevBtn");
const next = document.querySelector("#nxtBtn");

let counter = 0; 
let size="";


next.addEventListener('click', ()=>{
      size = allImages[0].clientWidth;
    if(counter >= allImages.length - 1){
        allSlides.style.transform = 'translateX(0px)';
        counter = 0;
       /* textFade();*/
    } else {
    allSlides.style.transition = "transform 0.4s ease-in-out";
    counter++
    allSlides.style.transform = 'translateX(' + (-size * counter) + "px)";
   /* textFade();*/
    }
    
})
prev.addEventListener('click', ()=>{
    size = allImages[0].clientWidth;
    if(counter <= 0 ){
        allSlides.style.transform = 'translateX(' + (size * 3) + "px)";
        counter = 3;
        /* textFade();*/
    }
    allSlides.style.transition = "transform 0.4s ease-in-out";
    counter--
    allSlides.style.transform = 'translateX('+(-size * counter) + "px)";
   /* textFade();*/
})
* {
    box-sizing: border-box;
    font-family: 'Times New Roman', Times, serif;
    margin: 0;
    padding: 0;
}

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;    
}

/* HEADER */
.navbar-container {
    width: 83.5%;
    background-color: black;
    margin: auto;
    padding: 2.2vw 0;
    height: 14.1vw;
}

.header-subcontainer {
    display: flex;
    justify-content: space-between;
    width: 71vw;
    margin: auto;
    position: relative;
    z-index: 999;
}

.menu-tab{
    visibility: hidden;
    position: absolute;
}

.header-container {
    width: 80%;
}

.logo-container img{  
    width: 21vw;
}

.navbar-social {
    padding: 0 .45vw 0 .35vw;
    height: .7vw;
    margin-bottom: -.3vw;
}

.navbar-social:last-of-type {
    padding-right: 0;
}

.link-container {
    display:flex;
    justify-content: right;
    width: 60%;
    margin: -1vw 0 0 27.15vw;
    position: relative;
   
}

.links {
    text-decoration: none;
    color:white;
    margin-left: 1.7vw;
    display: inline-block;
    font-size: 1vw;
    cursor: default;
}

.links:after {
    display: block;
    content: '';
    border-bottom: 1px solid #ffffff;
    transform: scaleX(0);
    transition: transform 200ms ease-in-out;
    transform-origin: 0% 50%;
}

.links:hover:after {
    transform: scaleX(1); transform-origin:   0% 50%;
}

.header-container {
    width: 100%;
    height: 2vw;
    text-align: right;
    margin-top: -.8vw;
}

/* ------- SEARCH ------- */

.searchbar {
    color: white;
    background: none;
    border: none;
    border-bottom: 2px solid grey;
    padding-left: 1.1vw;
    padding-bottom: .3vw;
    margin-right: 1vw;
    margin-left: -.5vw;
    width: 100%;
    height: 1vw;
    font-size: .7vw;
}

.mobile-searchbar {
    visibility: hidden;
    position: absolute;
}

.search-box{
    display: inline-block;
    width: 20.8%;
    z-index: 100;
}
#hidden-search {
    left: 0;
}

#myUL {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
  
#myUL li{
    border-bottom: 2px solid #1f1f1f;
}

#myUL li a {   
    margin-top: -1px; /* Prevent double borders */   
    padding: 1vw 0 1vw 0;
    text-decoration: none;
    font-size: .7vw;
    color: white;
    display: block
}

.search-content{
    width: 16.6vw;
    text-align: left;
    margin-top: 0px;
    background-color: black;
    outline: 1px solid #707070;
    padding: 0 1vw 2vw 1vw;
    color: white;
    position: absolute;
    visibility: hidden;
    z-index: 100;
    margin-left: 18.45vw;
}

#myUL h2 {
    font-weight: normal;
    padding-bottom: .5vw;
}

#myUL span{
    font-size: .9vw;
    line-height: 1.2vw;
}

::placeholder {
    color: white;
}

.search-icon {
    position: absolute;
    width: .7vw;
    margin-left: -.5vw;
    margin-top: .2vw;
}

.second-search-icon{
    position: absolute;
    visibility: hidden;
}
input:focus {
    outline: none;
}

/*------- SLIDER -------*/

.slider-container {
    width: 71vw;
    height: 40vw;
    margin: auto;
    margin-top: -6.49vw;
    z-index: 2;
}

.slider {
    margin: auto;   
    overflow: hidden;
    width: 50%;      /*changed from 100 to 50*/
    height: 30vw;
}

.slide {
    display: flex;
    width: 100%;   
    height: 100%;
}

#prevBtn {
    background-image: url(assets/images/arrow-left.svg);
    background-size: cover;
    width: 1.5vw;
    height: 1.5vw;
    border: none;
    background-color: rgba(255, 255, 255, 0);
    position: relative;
    left: 67vw;
    top: 1.2vw;
    cursor: pointer;
} 

#nxtBtn {
    background-image: url(assets/images/arrow-right.svg);
    background-size: cover;
    width: 1.5vw;
    height: 1.5vw;
    border: none;
    background-color: white;
    position: relative;
    left: 67.8vw;
    top: 1.2vw;
    cursor: pointer;
}

.sub-slider {
    width: 41.45vw;
    background-color: black;
    color: white;
    margin-left: 5.8vw;
    font-size: 1.7vw;
    line-height: 2.2vw;
    padding: 3.8vw 4vw;
    margin-top: -6vw;
    position: relative;
    opacity: 100%;
    transition: opacity 300ms;
    z-index: 4;
}

.sub-slider-2 {
    width: 41.45vw;
    background-color: black;
    color: white;
    margin-left: 5.8vw;
    font-size: 1.7vw;
    line-height: 2.2vw;
    padding: 3.8vw 4vw;
    margin-top: -6vw;
    position: relative;
    top: -6vw;
    opacity: 0%;
    transition: opacity 300ms;
    z-index: 4;
}

.sub-slider-3 {
    width: 41.45vw;
    background-color: black;
    color: white;
    margin-left: 5.8vw;
    font-size: 1.7vw;
    line-height: 2.2vw;
    padding: 3.8vw 4vw;
    margin-top: -6vw;
    position: relative;
    top: -12vw;
    opacity: 0%;
    transition: opacity 300ms;
    z-index: 4;
}

.sub-slider-background {
    width: 41.45vw;
    background-color: black;
    color: black;
    margin-left: 5.8vw;
    font-size: 1.7vw;
    line-height: 2.2vw;
    padding: 3.8vw 4vw;
    margin-top: -24vw;
    position: relative;
    z-index: 3;
}

.close-menu {
    position: absolute;
    visibility: hidden;
}

.hidden-social {
    position: absolute;
    visibility: hidden;
}
<!DOCTYPE html>
<html lang="en">
<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">
    <link rel="stylesheet" href="styles.css">
    
    <title>World Barista Cup</title>
</head>
<body>
    <div id="overlay">


        <!-- HEADER -->
        <header class="navbar-container">
            <div class="header-subcontainer">
                <div class="logo-container">
                    <img src="assets/images/logo-white.png" alt="">
                </div>
                <div class="header-container">
                    <img class="search-icon" src="assets/images/search.svg" id="search-icon" alt=""
                        onclick="rotateSearchIcon();showData();">
                    <img src="assets/images/menu_tab.png" alt="" class="menu-tab" id="menu-tab" onclick="show_menu()">
                    <img src="assets/images/close.svg" alt="" class="close-menu" id="close-menu" onclick="close_menu()">
                    <div class="search-box">
                        <input type="text" id="myInput" name="text" onkeyup="searchFunction()" onclick="showData()"
                            class="searchbar" placeholder="search">
                        <div class="search-content" id="hidden-search">
                            <ul id="myUL">
                                <img class="second-search-icon" src="assets/images/search.svg" alt="">
                                <input type="text" id="mobile-search-input" name="text" onkeyup="searchFunctionMobile()"
                                    class="mobile-searchbar" placeholder="search">
                                <li><a href="#" onclick="firstPopup()">
                                        <h2>Wonderful Copenhagen 2021</h2>
                                        <span class="search-publish">Published 12/0/21<br></span>
                                        <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit ipsam
                                            officia mini...</span>
                                    </a></li>

                                <li><a href="#" onclick="secondPopup()">
                                        <h2>The most expensive coffee on the market</h2>
                                        <span class="search-publish">Published 12/0/21<br></span>
                                        <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit ipsam
                                            officia mini...</span>
                                </li></a>
                                <li><a href="#" onclick="thirdPopup()">
                                        <h2>10 types of coffee beans you need to know</h2>
                                        <span class="search-publish">Published 12/0/21<br></span>
                                        <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit ipsam
                                            officia mini...</span>
                                    </a></li>

                                <li><a href="#" onclick="fourthPopup()">
                                        <h2>Challenge your barista skills to the max</h2>
                                        <span class="search-publish">Published 12/0/21<br></span>
                                        <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit ipsam
                                            officia mini...</span>
                                    </a></li>
                            </ul>
                        </div>
                    </div>
                    <img class="navbar-social" src="assets/images/linkedin-white.svg" alt="">
                    <img class="navbar-social" src="assets/images/twitter-white.svg" alt="">
                    <img class="navbar-social" src="assets/images/instagram-white.svg" alt="">
                    <img class="navbar-social" src="assets/images/facebook-white.svg" alt="">
                    <br>
                </div>
            </div>

            <!-- MOBILE MENU -->
            <div class="link-container">
                <nav id="hidden-menu">
                    <div>
                        <a href="/" class="links">About us</a>
                        <a href="/" class="links">Events</a>
                        <a href="/" class="links">Nordic roaster</a>
                        <a href="/" class="links">Results</a>
                        <a href="/" class="links">Links</a>
                        <a href="/" class="links">Contact</a>
                        <div class="hidden-social">
                            <img class="menu-social" src="assets/images/linkedin-white.svg" alt="">
                            <img class="menu-social" src="assets/images/twitter-white.svg" alt="">
                            <img class="menu-social" src="assets/images/instagram-white.svg" alt="">
                            <img class="menu-social" src="assets/images/facebook-white.svg" alt="">
                        </div>

                    </div>

                </nav>
            </div>
        </header>


        <!-- SLIDER -->
        <section class="slider-container">
            <div class="slider">
                <div class="slide">
                    <img
                        src="https://images.unsplash.com/photo-1558909552-8fcf7c94b575?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8Y29mZmVlJTIwbGFuZHNjYXBlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
                        alt="">
                    <img
                        src="https://images.unsplash.com/photo-1571867424485-ca624c51c157?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8Y29mZmVlJTIwbGFuZHNjYXBlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
                        alt="">
                    <img
                        src="https://images.unsplash.com/photo-1517789807669-59c1043388b0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjB8fGNvZmZlZSUyMGxhbmRzY2FwZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60"
                        alt="">
                </div>
            </div>
            <button id="prevBtn">prev</button>
            <button id="nxtBtn">next</button>
            <div class="sub-slider" id="slide-text-1">
                <p>"To create an environment in which knowledge about coffee and its sphere can be obtained"</p>
            </div>
            <div class="sub-slider-2" id="slide-text-2">
                <p>"This is a great introduction to the coffee industry's best beans on the planet"</p>
            </div>
            <div class="sub-slider-3" id="slide-text-3">
                <p>"Coffee in code out, this is the way of eternal life and empowerment of the soul"</p>
            </div>
            <div class="sub-slider-background">
                <p>"Coffee in code out, this is the way of eternal life and empowerment of the soul"</p>
            </div>
        </section>

user_193658210
Related