next previous anchor for each photos in a html page

Question

I am trying to create a photo gallery page that will be listing photos one by one. But i would like to have an anchor for each photos that when user clicks on next previous buttons it should slide to the next/previous photos accordingly by using the ID's values.

How to achieve this function in jquery?

https://jsfiddle.net/2oqg9rpL/1/

<div class="photogallery_wrapper_nf">

        <div class="next"><img src="http://ktdev.khaleejtimes.ae/up-chevron.png" /></div>
        <div class="previous"><img src="http://ktdev.khaleejtimes.ae/down-chevron.png" /></div>

        <div class="photogallery_item_nf_heading">

            <h1>Heading # 1 </h1>
            <p>Published on November 17, 2019 at 07.50 am</p>
        </div>

        <div class="photogallery_item_nf" id="slide1">
            <div class="photogallery_item_nf_img">
                <img src="https://picsum.photos/1200/800/?random" />

            </div>

            <div class="photogallery_item_nf_caption">

                <h3>Caption goes here Caption goes hereCaption goes here</h3>
                <h6>Photo by ddvdvd </h6>

            </div>

        </div>


        <div class="photogallery_item_nf" id="slide2">
            <div class="photogallery_item_nf_img">
                <img src="https://picsum.photos/1200/800/?random" />

            </div>

            <div class="photogallery_item_nf_caption">

        <h3>Caption goes here Caption goes hereCaption goes here</h3>
                <h6>Photo by ddvdvd </h6>

            </div>

        </div>



        <div class="photogallery_item_nf" id="slide3">
            <div class="photogallery_item_nf_img">
                <img src="https://picsum.photos/1200/800/?random" />

            </div>

            <div class="photogallery_item_nf_caption">

        <h3>Caption goes here Caption goes hereCaption goes here</h3>
                <h6>Photo by ddvdvd </h6>

            </div>

        </div>

                <div class="photogallery_item_nf" id="slide4">
            <div class="photogallery_item_nf_img">
                <img src="https://picsum.photos/1200/800/?random" />

            </div>

            <div class="photogallery_item_nf_caption">
        <h3>Caption goes here Caption goes hereCaption goes here</h3>
                <h6>Photo by ddvdvd </h6>

            </div>

        </div>

    </div>








.photogallery_wrapper_nf {
        width: 100%;
        float: left;
        position: relative;
        clear: both;
    }

    .next {
        position: fixed;
        width: 40px;
        height: 40px;
        bottom: 15px;
        right: 15px;
        z-index: 999 !important;
    }
    .previous {
        position: fixed;
        width: 40px;
        height: 40px;
        bottom: 15px;
        right: 75px;
        z-index: 999 !important;
    }

    .next img {
        width: 40px !important;
        height: 40px  !important;
    }
    .previous img {
        width: 40px !important;
        height: 40px  !important;
    }

    .photogallery_item_nf {
        width: 100%;
        float: left;
        position: relative;
        margin-bottom: 20px;
    }
    .photogallery_item_nf_heading {
        width: 100%;
        clear: both;
        margin: 15px 0px;
    }
    .photogallery_item_nf_heading h1 {
        color: #000 !important;
        font-family: 'Roboto Condensed', sans-serif;
        font-weight: bold;
        font-size: 35px;
        line-height: 40px;
        font-weight: bold;
        padding-left: 10px;
    }
    .photogallery_item_nf_heading p {
        margin-top: 8px;
        color: #767676 !important;
        font-family: 'Roboto Condensed', sans-serif;
        font-size: 15px;
        font-weight: normal;
        padding-left: 10px;
    }

    .photogallery_item_nf_img {
        width: 100%;
        float: left;
        position: relative;
    }
    .photogallery_item_nf_img img {
        width: 100%;
    }
    .photogallery_item_nf_caption {
        width: 100%;
        float: left;
        position: relative;
        padding: 12px 0;  
    }


    .photogallery_item_nf_caption h3 {
        color: #000 !important;
        font-family: 'Roboto Condensed', sans-serif;
        font-size: 18px;
        line-height: 26px;
        font-weight: bold;
        padding-left: 10px;
        margin-bottom: 10px;
    }
    .photogallery_item_nf_caption h6 {
        color: #767676 !important;
        font-family: 'Roboto Condensed', sans-serif;
        font-size: 15px;
        font-weight: normal;
        padding-left: 10px;
    }

</style>

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

I prefer glide js than jquery. Libraries are built to favour developers. So make use of it if you don't have any technical limitations. Try glide js.

Glide.js is a dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more.

Again, it's your choice to select this library. It's just a suggestion

It is more responsive. This will help you to achieve your case.

score 0 · Answer 2 · answered Nov 17 '19 at 08:55

Check this slider

$(function() {
    $('#checkbox').change(function () {
        setInterval(function () {
            moveRight();
        }, 3000);
    });

    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;

    $('#slider').css({
        width: slideWidth,
        height: slideHeight
    });

    $('#slider ul').css({
        width: sliderUlWidth,
        marginLeft: -slideWidth
    });

    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {
        $('#slider ul').animate({
            left: +slideWidth
        }, 200, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    function moveRight() {
        $('#slider ul').animate({
            left: -slideWidth
        }, 200, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    $('a.control_prev').click(function () {
        moveLeft();
    });

    $('a.control_next').click(function () {
        moveRight();
    });
});

 html {
    border-top: 5px solid #fff;
    background: #58DDAF;
    color: #2a2a2a;
}
html, body {
    margin: 0;
    padding: 0;
    font-family:'Open Sans';
}
h1 {
    color: #fff;
    text-align: center;
    font-weight: 300;
}
#slider {
    position: relative;
    overflow: hidden;
    margin: 20px auto 0 auto;
    border-radius: 4px;
}
#slider ul {
    position: relative;
    margin: 0;
    padding: 0;
    height: 200px;
    list-style: none;
}
#slider ul li {
    position: relative;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    width: 500px;
    height: 300px;
    background: #ccc;
    text-align: center;
    line-height: 300px;
}
a.control_prev, a.control_next {
    position: absolute;
    top: 40%;
    z-index: 999;
    display: block;
    padding: 4% 3%;
    width: auto;
    height: auto;
    background: #2a2a2a;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    opacity: 0.8;
    cursor: pointer;
}
a.control_prev:hover, a.control_next:hover {
    opacity: 1;
    -webkit-transition: all 0.2s ease;
}
a.control_prev {
    border-radius: 0 2px 2px 0;
}
a.control_next {
    right: 0;
    border-radius: 2px 0 0 2px;
}
.slider_option {
    position: relative;
    margin: 10px auto;
    width: 160px;
    font-size: 18px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<h1>Incredibly Basic Slider</h1>

<div id="slider">
    <a href="#" class="control_next">&gt;</a>
    <a href="#" class="control_prev">&lt;</a>
    <ul>
        <li><img src="https://picsum.photos/1200/800/?random" /></li>
        <li> <img src="https://picsum.photos/1200/800/?random" /></li>
        <li> <img src="https://picsum.photos/1200/800/?random" /></li>
        <li> <img src="https://picsum.photos/1200/800/?random" /></li>
    </ul>
</div>
<div class="slider_option">
    <input type="checkbox" id="checkbox" />
    <label for="checkbox">Autoplay Slider</label>
</div>

Thanks Good Samaritan, Unfortunately, This project is based only on jquery and not possible to use different frameworks. — bootstrap, Nov 17 '19 at 09:41

score 0 · Answer 3 · answered Nov 17 '19 at 08:59

0

This might help you

(()=>currentSlide=1)()
document.getElementsByClassName("next")[0].onclick=function(){
    currentSlide=currentSlide<4?currentSlide+1:currentSlide;
  alert(currentSlide)
  document.getElementById("slide"+currentSlide).scrollIntoView();
}
document.getElementsByClassName("previous")[0].onclick=function(){
alert(currentSlide)
    currentSlide=currentSlide>1?currentSlide-1:currentSlide;
  document.getElementById("slide"+currentSlide).scrollIntoView();
}

answered Nov 17 '19 at 08:59

Ashikur Rahman

84
1
7

Thanks Ashikur Rahman, But it doesn't work. Kindly check the updated demo : https://jsfiddle.net/2oqg9rpL/1/ Any solution for this? – bootstrap Nov 17 '19 at 09:50

next previous anchor for each photos in a html page

3 Answers3