Conflict between automatic shift and bullet movement (only one works at a time)

Question

I am new to jQuery and I tried to create my own slider that would

• automatically moves to a specified time interval
• Slide when clicking on brand navigation
• The active state of navigation automatically changes with an automatic slide
• The active link changes when the user clicks on the navigation through the brand.

The code I tried is below. Sorry if this is not straightforward and simple, as I am new to this. The part I commented on in jQuery is for auto slip.

Problem. When I uncomment the auto-exchange code, bullet navigation does not work and vice versa. Only one works at a time. Please help me with this. Thanks.

https://jsfiddle.net/Kowshikan/ac46y9do/

HTML:

 <div id="newsFeed">
 <h3> Our Latest News </h3>
    <ul id="slideBox">
        <!--  slide 1 -->
        <li id="1"> 
            Content 1
        </li>

        <!--  slide 2 -->
        <li id="2">     
            Content 2
        </li>

        <!--  slide 3 -->
        <li id="3"> 
            Content 3
        </li>

        <!--  slide 4 -->
        <li id="4"> 
            Content 4
        </li>

        <!--  slide 5 -->
        <li id="5"> 
            Content 5
        </li>
        <div class="clearfix"> </div>
    </ul>

    <!--  Pagination -->
    <div class="pager">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <div class="clearfix"> </div>
    </div>
</div>

CSS

#newsFeed
{
    overflow: hidden;
}
#slideBox
{
    overflow: hidden;
    padding: 0;
    position: relative;
    margin-bottom: 0;
}
#slideBox li
{
    border: 1px solid #ccc;
    list-style-type: none;
    float: left;
    padding: 10px;
    min-height: 336px;
}
.pager
{
    margin: 0;
    text-align: left;
    background-color: #F5F5F5;
    min-height: 65px;
    border: 1px solid #ccc;
    border-top: 0 !important;
    position: relative;
}
.pager ul
{
    padding: 10px;
}
.pager a 
{
    color: #444 !important;
    font-weight: bold;
    font-size: 11px;
    display: block;
    padding: 5px 10px;
    background: linear-gradient(center top , #FFF 0%, #F0F0F0 100%) repeat scroll 0% 0% transparent;
    background: -webkit-linear-gradient(center top , #FFF 0%, #F0F0F0 100%) repeat scroll 0% 0% transparent;
    background: -moz-linear-gradient(center top , #FFF 0%, #F0F0F0 100%) repeat scroll 0% 0% transparent;
    border: 1px solid #ccc;
    text-align: center;
    position: absolute;
    right: 10px;
    bottom: 10px;
}
.pager a:hover
{
    text-decoration: none;
}
.pagerActive
{
    background: linear-gradient(center top , #eeeeee 0%, #ffffff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    background: -webkit-linear-gradient(center top , #eeeeee 0%, #ffffff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    background: -moz-linear-gradient(center top , #eeeeee 0%, #ffffff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    border: 1px solid #bbbbbb !important;
}
.pager li
{
    cursor: pointer;
    color: #777;
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    background: linear-gradient(center top , #FFF 0%, #EEE 100%) repeat scroll 0% 0% transparent;
    background: -webkit-linear-gradient(center top , #FFF 0%, #EEE 100%) repeat scroll 0% 0% transparent;
    background: -moz-linear-gradient(center top , #FFF 0%, #EEE 100%) repeat scroll 0% 0% transparent;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 3px;
}
.pager li:hover
{
    border: 1px solid #aaaaaa;
}

Jquery:

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript"> 
    $(document).ready(function(){
        totalslide = $('#slideBox li').length;
        slidewidth = $('#newsFeed').width();
        var totalwidth = slidewidth * totalslide;
        $('#slideBox').css({'width': totalwidth});
        $('#slideBox li').css({'width': slidewidth});
        $('.pager li:first').addClass('pagerActive');

        /* setInterval(function () {
                autoslide();
        }, 2000); */

        $('.pager li').click(function(){
            var slide = ($(this).html() - 1) * slidewidth;
            $('#slideBox').animate({right: slide}, 500);
            $('.pager li').removeClass('pagerActive');
            $(this).addClass('pagerActive');
        });
    });

    /* function autoslide() 
    {
        $('#slideBox li').each(function(index){
            $('#slideBox').delay(2000).animate({right: slidewidth*index}, 500);
        });
    } */

</script>

Answer 1

What you need to change to make it work:

• Do not call the animation for each element li, just once.
• Do not delay the animation if you have already set the interval.
• Report on your function autoslide(), which is the active slide, so it can move on to the next.

What you can change:

• If both autoslide()and $('.pager li').click(function()will perform the same job, select this code in a separate function.
• totalwidth '#slideBox' , padding border . - , .
• id.

:

var totalslide = $( '#slideBox li' ).length;
var slidePadding = parseInt( $( '#slideBox li' ).css( 'padding-left' ) );
var slideBorder = parseInt( $( '#slideBox li' ).css( 'border-left-width' ) );
var slidewidth = $( '#newsFeed' ).width();
var slideRealWidth = slidewidth + 2 * ( slidePadding + slideBorder );
var totalwidth = totalslide * slideRealWidth;

$( '#slideBox' ).css( {'width': totalwidth} );
$( '#slideBox li' ).css( {'width': slidewidth} );
$( '.pager li:first' ).addClass( 'pagerActive' );

setInterval( function () {
    autoslide();
}, 2000 ); 

function setActiveSlide ( activePager ) {
    $( '.pager li' ).removeClass( 'pagerActive' );
    $( '#pager' + activePager ).addClass( 'pagerActive' );
    var currentWidth = slideRealWidth * ( activePager - 1 );
    $( '#slideBox' ).animate( {right: currentWidth }, 500);
}

$( '.pager li' ).click (function() {
    var activePager = parseInt( $(this).html() );
    setActiveSlide( activePager );
});

function autoslide() {
    var activePager = parseInt( $('.pagerActive').html() );
    var nextPager = ( activePager > 4 )? 1 : activePager + 1;
    setActiveSlide( nextPager );
}

#newsFeed {
    overflow: hidden;
}
#slideBox {
    overflow: hidden;
    padding: 0;
    position: relative;
    margin-bottom: 0;
}
#slideBox li {
    border: 1px solid #ccc;
    list-style-type: none;
    float: left;
    padding: 5px;
    min-height: 50px;
}
.pager {
    margin: 0;
    text-align: left;
    background-color: #F5F5F5;
    min-height: 65px;
    border: 1px solid #ccc;
    border-top: 0 !important;
    position: relative;
}
.pager ul {
    padding: 10px;
}
.pager a {
    color: #444 !important;
    font-weight: bold;
    font-size: 11px;
    display: block;
    padding: 5px 10px;
    background: linear-gradient(center top, #FFF 0%, #F0F0F0 100%) repeat scroll 0% 0% transparent;
    background: -webkit-linear-gradient(center top, #FFF 0%, #F0F0F0 100%) repeat scroll 0% 0% transparent;
    background: -moz-linear-gradient(center top, #FFF 0%, #F0F0F0 100%) repeat scroll 0% 0% transparent;
    border: 1px solid #ccc;
    text-align: center;
    position: absolute;
    right: 10px;
    bottom: 10px;
}
.pager a:hover {
    text-decoration: none;
}
.pagerActive {
    background: linear-gradient(center top, #eeeeee 0%, #ffffff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    background: -webkit-linear-gradient(center top, #eeeeee 0%, #ffffff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    background: -moz-linear-gradient(center top, #eeeeee 0%, #ffffff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    border: 1px solid #bbbbbb !important;
}
.pager li {
    cursor: pointer;
    color: #777;
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    background: linear-gradient(center top, #FFF 0%, #EEE 100%) repeat scroll 0% 0% transparent;
    background: -webkit-linear-gradient(center top, #FFF 0%, #EEE 100%) repeat scroll 0% 0% transparent;
    background: -moz-linear-gradient(center top, #FFF 0%, #EEE 100%) repeat scroll 0% 0% transparent;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 3px;
}
.pager li:hover {
    border: 1px solid #aaaaaa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="newsFeed">
    <h3> Our Latest News </h3>
    <ul id="slideBox">
    	<!--  slide 1 -->
    	<li id="slide1"> 
    		Content 1
    	</li>  
    	<!--  slide 2 -->
    	<li id="slide2"> 	
    		Content 2
    	</li>    
    	<!--  slide 3 -->
    	<li id="slide3"> 
    		Content 3
    	</li>   
    	<!--  slide 4 -->
    	<li id="slide4"> 
    		Content 4
    	</li>   
    	<!--  slide 5 -->
    	<li id="slide5"> 
    		Content 5
    	</li>
    	<div class="clearfix"> </div>
    </ul>
    <!--  Pagination -->
    <div class="pager">
    	<ul>
    		<li id="pager1">1</li>
    		<li id="pager2">2</li>
    		<li id="pager3">3</li>
    		<li id="pager4">4</li>
    		<li id="pager5">5</li>
    	</ul>
    	<div class="clearfix"> </div>
    </div>
</div>

Hide result

, !

---

UPDATE

, . , , , > 4 >= totalslide.

var nextPager = ( activePager >= totalslide )? 1 : activePager + 1;
/* equivalent to:
if ( activePager >= totalslide )
    // if we have reached the last slide, we come back to the first one
    nextPager = 1;
else
    // if not, we go to the next one
    nextPager = activePager + 1;
*/

// Invoking setActiveSlide function passing nextPager (the index of the next slide)
setActiveSlide( nextPager );