Horizontal Div Scroll

I’m quite new to Jquery, I’m trying to implement horizontal scrolling on a div using the scrollLeft property, I’m not getting any error messages and nothing seems to be working, could someone explain why? Thanks in advance this is my code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
        $(document).ready (function(){
            var pos  = $("#container").scrollLeft();
            $(".prev").click(function(){
                $("#container").animate({
                    scrollLeft: pos - 200;
                });
            }); 
        });
    
        
        
  </script>
<style>
        #container{
            max-width: 938px;
            height: 500px;
            border: 2px solid black;
            margin-left: auto;
            margin-right: auto;
            overflow: scroll;
            /*display: table;*/
        }
        .picsdiv{
            display: table-cell;
            min-width: 286px;
            padding-right: 80px;
            height: 508px;
            border: 2px solid pink;
            
        }
        
        .prev, .next {
          cursor: pointer;
          position: absolute;
          top: 250px;
          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;
            border: 2px solid pink;
        }

        .next {
          right: 170px;
          border-radius: 3px 0 0 3px;
        }
        .prev{
            left: 170px;
        }

        .prev:hover, .next:hover {
          background-color: rgba(0,0,0,0.8);
        }
    </style>
  
<body>
   <div id="container">
       <div class="picsdiv">
       
       </div>
       <div class="picsdiv">
       
       </div>
       <div class="picsdiv">
       
       </div>
       <div class="picsdiv">
       
       </div>
       <a class="prev">&#10094;</a>
      <a class="next">&#10095;</a>
    </div> 
    
</body>

Answer

I just added a seperate script tag for the Jquery code and used the first one to only refer to the library and it now works. Thanks for all your help

Leave a Reply

Your email address will not be published. Required fields are marked *