Home/ Questions/Q 6213195
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T06:39:08+00:00

I made a sort of a horizontal slider. (All code for it below.) Everything

  • 0

I made a sort of a horizontal slider. (All code for it below.)

Everything works accept the scrolling. The slider only scrolls left and right with selections in one case: when you click a image and then go left or right using the arrow keys. But it doesn’t scroll if you (1) just click the previous and next buttons or (2) never click and only use arrows keys. (It may be a focus problem?)

How can I fix this?

Code:

<!DOCTYPE html> 
<html>
<style>
div.backdrop {
    position:absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    margin:0;
    padding:0;
}

div.other {
    position: absolute;
    top:50%;
    margin-top:-255px;
    left:0;
    width:100%;
}

div.other div.window {
    width: 560px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    background-color: transparent;
    border: 5px solid rgba(0, 0, 0, 0.1);
}

div.other div.all {
    width: 560px;
    margin: 0px auto;
    background-color: #111111;
    border-radius: 5px;
}

div.other div.main {
    width: 550px;
    height: auto;
    margin: 0px auto;
    padding: 5px;
    background-color: #fff;
    border-radius: 5px 5px 0px 0px;
}

div.other div.main div.picture {
    height: 350px;
    margin: 0px auto;
    min-height: 350px;
    background: black;
    min-width: 30px;
    border-radius: 5px;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.1);
}

div.other div.main div.picture img {
    border-radius: 5px;
    height:350px;
    max-width:550px;
    border-radius:5px;  
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);
}

div.other div.main div.inner-shadow {
    position: absolute;
    width: 550px;
    height: 350px;
    top: 100px;
    border-radius: 5px;
    box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.6);
}

div.other div.infos {
    width: auto;
    height: 62px;
    padding: 0px;
    background-color: #000;
    border-radius: 0px 0px 5px 5px;
}

div.other div.infos div.previous {
    float: left;
    border-right: 1px solid #e5e5e5;
    margin-right: 10px;
}

div.other div.infos div.previous button {
    display: block;
    width: 30px;
    height: 56px;
    padding-top: 5px;
    background-color: red;
    border: none;
}

div.other div.infos div.next {
    float: right;
    border-left: 1px solid #e5e5e5;
    margin-left: 10px;
}

div.other div.infos div.next button {
    display: block;
    width: 30px;
    height: 56px;
    padding-top: 5px;
    background-color: transparent;
    border: none;
    background-color:red;
}

div.other div.infos button:hover {
    cursor: pointer;
}


div.other div.thumbnails {
    width: auto;
    height: 106px;
    padding-bottom: 5px;
    background-color: #fff;
    border-radius: 5px; 
    overflow: hidden;
    box-shadow: none;
}

div.other div.thumbnails div.slider {
    width: auto;
    height: 101px;
    overflow-y:hidden;
    overflow-x:scroll;
    padding: 0px 7px;
    position:relative;
}

div.other div.thumbnails div.slider ul {
    position:relative;
}


div.other div.thumbnails ul {
    width: 560px;
    height: 80px;
    margin: 0px;
    padding: 10px 0px;
    list-style: none;
    text-align: center;
    white-space: nowrap;
}

div.other div.thumbnails ul li {
    display: inline-block;
    height: 80px;
    margin: 0px 3px;
}

div.other div.thumbnails ul li a img {
    display: block;
    border-radius: 4px;
    border: 2px solid #fff;
    -webkit-transition: ease-in border 0.2s;
    width: auto;
    height:80px;
    max-height:80px;
}

div.other div.thumbnails ul li.selected a img,
div.other div.thumbnails ul li a:hover img {
    border: 4px solid #000;
}


</style> 
<body>
    <div class="backdrop">
        <div class="other">     
        <div class="window">
            <div class="all">

                <div class="infos" style="text-align:center;">
                    <div class="previous"><button>Previous</button></div>
                    <div class="next"><button>Next</button></div>
                    <p> test</p>
                </div>
                <div class="thumbnails">
                    <div class="slider">
                        <ul>
                            <li class="selected"><a href="#"><img src="http://cf1.imgobject.com/backdrops/a2e/4bc95852017a3c57fe027a2e/avatar-original.jpg" alt="" /></a></li>
                            <li><a href="#"><img src="http://placekitten.com/90/84" alt="" /></a></li>
                            <li><a href="#"><img src="http://placekitten.com/100/84" alt="" /></a></li>
                            <li><a href="#"><img src="http://placekitten.com/60/84" alt="" /></a></li>
                            <li><a href="#"><img src="http://placekitten.com/119/84" alt="" /></a></li>
                            <li><a href="#"><img src="http://placekitten.com/92/89" alt="" /></a></li>
                            <li><a href="#"><img src="http://placekitten.com/60/84" alt="" /></a></li>
                            <li><a href="#"><img src="http://placekitten.com/119/84" alt="" /></a></li>
                            <li><a href="#"><img src="http://placekitten.com/92/89" alt="" /></a></li>
                            <li><a href="#"><img src="http://placekitten.com/60/84" alt="" /></a></li>
                            <li><a href="#"><img src="http://placekitten.com/119/84" alt="" /></a></li>
                            <li><a href="#"><img src="http://placekitten.com/92/89" alt="" /></a></li>
                        </ul>   
                    </div>  
                </div>  
            </div>
        </div>  
        </div>  

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="g.js"></script>
    <script type="text/javascript">

    $('div.slider ul li a img').click(function() {
        if(!$(this).parent().parent().hasClass('selected')){
            $('div.slider ul li.selected').removeClass('selected');
            $(this).parent().parent().addClass('selected');
            $('div.main div.picture img').attr('src',$(this).attr('src'));
        }
    });

    $('div.infos div.previous').click(function(){
        if($('div.slider ul li.selected').prev().is('li')){
            var $previous = $('div.slider ul li.selected').prev();
            $('div.slider ul li.selected').removeClass('selected');
            $previous.addClass('selected');
            $('div.main div.picture img').attr('src',$previous.children('a').children('img').attr('src'));
        }
    });

    $('div.infos div.next').click(function(){
        if($('div.slider ul li.selected').next().is('li')){
            var $next = $('div.slider ul li.selected').next();
            $('div.slider ul li.selected').removeClass('selected');
            $next.addClass('selected');
            $('div.main div.picture img').attr('src',$next.children('a').children('img').attr('src'));
        }       
    });

    $(document).keydown(function(e){
        if (e.keyCode == 37) { //left
            if($('div.slider ul li.selected').prev().is('li')){
                var $previous = $('div.slider ul li.selected').prev();
                $('div.slider ul li.selected').removeClass('selected');
                $previous.addClass('selected');
                $('div.main div.picture img').attr('src',$previous.children('a').children('img').attr('src'));
            }
        }
        else if (e.keyCode == 39) { //right
            if($('div.slider ul li.selected').next().is('li')){
                var $next = $('div.slider ul li.selected').next();
                $('div.slider ul li.selected').removeClass('selected');
                $next.addClass('selected');
                $('div.main div.picture img').attr('src',$next.children('a').children('img').attr('src'));
            }      
        }
    });


    </script>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    $('div.other div.thumbnails div.slider').scrollLeft($next.position().left);

    Do the same for $previous.

    Please get rid of:

    div.backdrop {
    position:absolute;

    And:

    div.other {
    position: absolute;
    top:50%;
    margin-top:-255px;

    I had to remove those before I could check the code for you, since it did not fit on my screen once I had the console open.

    BTW you can turn this:

    var $previous = $('div.slider ul li.selected').prev();
$('div.slider ul li.selected').removeClass('selected');
$previous.addClass('selected');

    Into:

    var $previous = $('div.slider ul li.selected').removeClass('selected').prev().addClass('selected');
    • 0