Simple carousel Slider

Jquery simple carousel slider, no looping on the slider.

by manoj_antony32

HTML

<div id="carousel">
    <a id="prev" href="#" style="pointer-events: none; border-color: rgb(218, 215, 215);"></a>
    <a id="next" href="#" style="pointer-events: initial; border-color: rgb(60, 138, 160);"></a>
    <div id="slidesText" style="width: 254px;">
        <ul id="slist" style="width: 508px; left: -254px;">
            <li id="sa_10" class="slide" style="width: 254px;"><a href="#.">Q3 2016 Financial Results</a>
            </li>
            <li id="sa_9" class="slide" style="width: 254px;"><a href="#.">GoPerform: Have you checked in?</a>
            </li>
            <li id="sa_8" class="slide" style="width: 254px;"><a href="#.">GoPerform: Have you checked in?</a>
            </li>            
        </ul>
    </div>
</div>

CSS

#carousel {
    position: relative;
    width: 76%;
    margin: 0 auto;
    height: 59px;
    padding: 1em 0;
}
#carousel #prev {
    font-size: 22px;
    margin-left: -1.2em;
    position: absolute;
    margin-top: 0.9em;
    display: inline;
    border-right: 2px solid;
    border-bottom: 2px solid;
    height: 12px;
    width: 12px;
    transform: rotate(135deg);
}
#carousel #next {
    font-size: 22px;
    position: absolute;
    margin-top: 0.9em;
    right: -1.15em;
    border-right: 2px solid;
    border-bottom: 2px solid;
    height: 12px;
    width: 12px;
    transform: rotate(-45deg);
}
#slidesText {
    overflow: hidden;
    position: relative;
    height: 37px;
    padding: 0.8em 0;
}
#slidesText ul {
    list-style: none;
    width: 100%;
    height: 250px;
    margin: 0;
    padding: 0;
    position: relative;
}
#slidesText li {
    width: 100%;
    height: auto;
    float: left;
    text-align: left;
    position: relative;
    font-family: lato, sans-serif;
}

JavaScript

//var run = setInterval(rotate, speed);
                var slides = $('.slide');
                var container = $('#slidesText ul');
                var elm = container.find(':first-child').prop("tagName");
                var item_width = container.width();
                var previous = 'prev'; //id of previous button
                var next = 'next'; //id of next button
                slides.width(item_width); //set the slides to the correct pixel width
                container.parent().width(item_width);
                container.width(slides.length * item_width); //set the slides container to the
                container.find(elm + ':first').before(container.find(elm + ':last'));
								var listCount =3;
                if(listCount != 1){
                    resetSlides();
                }
                /* Stop looping carousel*/
                var firstList = container.find(elm + ':first').attr('id');
                var lastList = container.find(elm + ':last').attr('id');
                var showingSlide = container.find(elm + ':nth-child(1)').attr('id');
                /* Stop looping carousel end*/
                
               $('#carousel a').on('click', function (e) {
                    //slide the item
                    console.log('debug')
                    var serviceId
                    if (container.is(':animated')) {
                        return false;
                    }
                    if (e.target.id == previous) {
                        $('#carousel #next').css('pointer-events','initial')
                        $('#carousel #next').css('border-color','#3c8aa0');
                        serviceId=container.find(elm + ':first').attr('id');                        
                        container.stop().animate({
                            'left': 0
                        }, 1500, function () {
                            container.find(elm + ':first').before(container.find(elm + ':last'));
                   ...