Image slides that fades when navbar is hit-CodePudding

I'm trying to make a replica of the slider on top of this google page: https://www.google.com/doodles

If someone could make a replica of the image slider with the bars, that would be great! I've tried to on my own but can't figure it out. Here's my try if it's helpful!

JAVASCRIPT:

 <script>
        var imgArray = [
            'images/img1.gif',
            'images/img2.gif',
            'images/img3.jpg',
        'images/img4.jpg'],
            curIndex = 0;
        imgDuration = 3000;

        function slideShow() {
            document.getElementById('slider').className  = "fadeOut";
            setTimeout(function () {
                document.getElementById('slider').src = imgArray[curIndex];
                document.getElementById('slider').className = "";
            }, 500);
            curIndex  ;
            if (curIndex == imgArray.length) { curIndex = 0; }
        }

    </script>

HTML:

            <img class="slidershow" id="slider" src="images/img1.gif" onmouseover="slideShow()">

            <div id="navigation">
                <label for="r1" class="bar" id="bar1"></label>
                <label for="r2" class="bar" id="bar2"></label>
                <label for="r3" class="bar" id="bar3"></label>
                <label for="r4" class="bar" id="bar4"></label>
            </div>

        </div>

CSS: --> Honestly, I wrote so much CSS that I don't know which ones relate, so I might have left a few out. Need to clean that up - Apologize in advance

.nav_links {
    list-style: none;
}

    .nav_links li {
        display: inline-block;
        padding: 0px 20px;
    }

        .nav_links li a {
            color: #009cdc;
            transition: all 0.3s ease 0s;
        }

        .nav_links li:hover a {
            color: #2772ff;
        }
#top-content {
    display: block;
}


latest-nav li#latest-nav-1 {
    background-color: #fa4842;
}

#latest-nav li.off {
    border-top: 15px solid #fff;
}

#latest-nav li.off {
    height: 5px;
    opacity: 0.35;
}

#latest-nav li {
    cursor: pointer;
    float: left;
    height: 5px;
    transition: opacity 0.15s ease,height 0.15s ease,border-top 0.15s ease;
    -moz-transition: opacity 0.15s ease,height 0.15s ease,border-top 0.15s ease;
    -webkit-transition: opacity 0.15s ease,height 0.15s ease,border-top 0.15s ease;
    width: 16.6%;
}



.slidershow {
    height: 400px;
    overflow: hidden;
}

.middle {
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%,-50%);
}

#navigation {
    position: absolute;
    bottom: 35px;
    left: 60%;
    transform: translateX(-50%);
    display: flex;
}

.bar {
    border-top: 15px solid #fff;
    width: 200px;
    opacity: 0.35;
    height: 5px;
    cursor: pointer;
    transition: 0.4s;
}


.slides {
    width: 500%;
    height: 100%;
    display: flex;
    margin-top: 30px;
}

.slide {
    width: 20%;
    transition: 0.6s;
}

    .slide img {
        display: block;
        margin: auto;
        max-height: 250px;
        max-width: 600px;
        width: auto;
    }

latest .container img {
    display: block;
    margin: auto;
    max-height: 250px;
    max-width: 600px;
}

#bar1 {
    background-color: #3875fc;
}

#bar2 {
    background-color: #ff8809;
}

#bar3 {
    background-color: #19be29;
}

#bar4 {
    background-color: #fa4842;
}

Thanks so much!

CodePudding user response：

I'm always happy to see newcomers devoting time to study. First of all, good job! Unfortunately I'm not a very good teacher, but I put together a little example of this slider you're working on. You can check it clicking here.

Basically what is going on is:

The HTML is divided into two sections: the slider & the navbar.
I hide all slides by default applying a display: none to them. They're only visible when I add an additional class.
Detect the hover method via javascript. Whenever the navbar item is hovered on, you will detect its position (I added a data attribute called data-position to find out which position it is) and show the correspondent slider.

So, if the navbar has the data-position of 2, I know that I must show the second slide. To do that, I use .slider .slider-item:nth-child(2).

As I mentioned I'm not the best at explaining, but I hope this helps you out a little bit. Keep studying and don't give up!

HTML:

<div class="wrapper">
    <div class="slider">
    <div class="slider-item slider-item--visible">
        hello item 1
    </div>
    <div class="slider-item">
        hello item 2
    </div>
    <div class="slider-item">
        hello item 3
    </div>
</div>
<nav class="navbar">
    <span class="navbar-item navbar-item--selected" data-position="1"></span>
    <span class="navbar-item" data-position="2"></span>
    <span class="navbar-item" data-position="3"></span>
</nav>
</div>

CSS

.wrapper{
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    display:  block;
}

/* Slider */
.slider{
    max-width: 100%;
    width: 100%;
}

.slider-item{
    display: none;
}
.slider-item--visible{
    display: block;
}

/* Navbar */
.navbar{
    max-width: 100%;
    display: flex;
    align-items: flex-end;
    height: 8px;
}
.navbar-item{
    max-width: 33.3%;
    width: 100%;
    display: block;
    height: 5px;
    cursor: pointer;
    opacity: .5;
    transition: all .32s ease;
}

.navbar-item--selected{
    height: 8px;
    opacity: 1;
}

/* Meaningless styles (colors) */ 
.navbar-item:nth-child(1){
    background: salmon;
}

.navbar-item:nth-child(2){
    background: lightblue;
}

.navbar-item:nth-child(3){
    background: #19be29;
}

Javascript

const $navbars = document.querySelectorAll(`.navbar-item`);


function removeSelected(){
    const $selected = document.querySelectorAll(`.navbar-item--selected, .slider-item--visible`);
    
    if (!$selected){
        return;
    }
    
    for (let each of $selected){
        each.classList.remove("navbar-item--selected");
        each.classList.remove("slider-item--visible");
    }
    
}

for (let each of $navbars){
    each.addEventListener("mouseover", function(){
        
        removeSelected();
        
        const position = each.getAttribute("data-position");
        const $item = document.querySelector(`.slider .slider-item:nth-child(${position})`)
        
        each.classList.add("navbar-item--selected")
        $item.classList.add("slider-item--visible");
    });
}