带有文本导航的滑动div

Question

It's me again :) today am trying to develop a sliding divs with text navigation, i mean that i can edit the nav not only generated bullets. say that we have three div s containing images and text and i need to center a navigation menu of three different links.. also if you can help me in that, if the current slider is number 3 and I clicked on nav item number 1 I want it to jump to 1 without seeing 2 during the scrolling

here is the original code i need to learn how to develop it http://www.alfaromeo.co.uk/models/giulietta#dynamism

links to a similar article or any help in general would be very appreciated

 .item--mobile .slider-item__wrap{height:300px;overflow:hidden} .row-slide,.row-wrap{*zoom:1;clear:both;position:relative} .row-slide:before,.row-slide:after,.row-wrap:before,.row-wrap:after{content:" ";display:table} .row-slide:after,.row-wrap:after{clear:both} .row-slide .content__text .animated-line,.row-wrap .content__text .animated-line{top:12px} @media screen and (min-width:769px){.slider-menu{width:100%;font-size:0;position:absolute;right:0;bottom:42px;left:0;text-align:center;z-index:4} .slider-menu>ul,.slider-menu>ul>li{display:inline-block} .slider-menu>ul{padding:0;font-size:0;width:100%} .slider-menu>ul>li{font:14px/14px "ApexNew-Medium",Helvetica,Arial,sans-serif;color:#000;background-color:#fff;text-transform:uppercase;letter-spacing:2px;padding-top:10px;padding-bottom:10px;border-right:1px solid #000;cursor:pointer;max-width:180px;width:100%;text-align:center} .slider-menu>ul>li:first-child{position:relative} .slider-menu>ul>li:first-child:before{content:"";width:90%;height:1px;position:absolute;bottom:5px;left:5%;background:#8f0c25} .slider-menu>ul>li:last-child{border-right:0} .slider-menu>ul>li.active{background-color:#8f0c25;color:#fff} } @media screen and (min-width:1366px){.slider-menu>ul>li{max-width:220px} } 

 <div class="row-slide"> <div class="slider-item-wrap"> <div class="slide current"> images and text goes here 1 </div> <div class="slide"> images and text goes here 2 </div> <div class="slide"> images and text goes here 3 </div> </div> <div class="slider-menu"> <ul> <li class="current"><a>link to slide 1</a></li> <li><a>link to slide 2</a></li> <li><a>link to slide 3</a></li> </ul> </div> </div> 

Answer 1

It looks like you want to develop a carousel .

There are several javascript and jQuery carousels, for example Slick and jCarousel

It will be much easier to use a plugin or somebody else's solution for this. Download one of the examples and follow the site's instructions for how to integrate it into your own site.

Otherwise, use your browser's Developer Tools or script debugging feature to study the script for that site you pointed to. You can also study the code of jCarousel and Slick, for example, or any library.

Here is a very simple example of a custom carousel I threw together that you can study. It uses progressive enhancement and takes advantage of scrolling so that even without javascript users still get a decent experience and can flip through content. (Though you could easily tailor it to hide the scrollbar by swapping images instead, for example).

The main parts are: 1) styling so that only one content panel shows at a time, and 2) the logic to animate the sliding of the panels when user navigates.

 $(".slider-menu a").on("click", function() { var $current = $(".slide.current"); var $li = $(this).closest("li"); var idx = $li.index(); if (idx !== $current.index()) { $(".slider-menu li.current").removeClass("current"); $li.addClass("current"); var $next = $(".slide").eq(idx); $current.removeClass("current"); $next.addClass("current"); var $carousel = $(".slider-item-wrap"); var left = $carousel[0].scrollLeft + $next.position().left; $carousel.animate({ scrollLeft: left }, 500); } }); 

 html, body, .row-slide, .slider-item-wrap { margin: 0; border: 0; padding: 0; width: 100%; height: 100%; font-family: "Segoe UI", Arial, sans-serif; font-size: 0; color: #fff; overflow: hidden; } .row-slide {} .slider-item-wrap { white-space: nowrap; overflow: auto; overflow-y: hidden; } .slide { width: 100%; height: 100%; font-size: 24px; display: inline-block; } .blue { background-color: blue; } .green { background-color: green; } .red { background-color: red; } .slider-menu { position: absolute; margin: 0 auto; width: 100%; margin: 0; border: 0; padding: 0; bottom: 20px; } .slider-menu ul { list-style: none; overflow: auto; margin: 0 auto; border: 0; padding: 20px; text-align: center; } .slider-menu li { padding: 4px 20px; display: inline-block; text-align: center; font-size: 20px; background-color: rgba(0, 0, 0, 0.3); color: #fff; } .slider-menu li:hover { background-color: rgba(255, 255, 255, 0.7); color: #222; cursor: pointer; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); } .slider-menu li.current, .slider-menu li.current:hover { background-color: rgba(0, 0, 0, .2); color: #333; box-shadow: 0 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row-slide"> <div class="slider-item-wrap"> <div class="slide current red"> images and text goes here 1 </div> <div class="slide blue"> images and text goes here 2 </div> <div class="slide green"> images and text goes here 3 </div> </div> <div class="slider-menu"> <ul> <li class="current"><a>link to slide 1</a> </li> <li><a>link to slide 2</a> </li> <li><a>link to slide 3</a> </li> </ul> </div> </div>