score:1
Accepted answer
The problem is swipe didn't change the dot class so they won't change.
I would suggest you to merge similar function to one to make sure they worked as expect.
So I add another function showSlide(index)
for click and swipe event to do.(their diff is click only need to show current but swipe need to show either previous or next)
check up these code and hope it helped!
$('ul li').each(function(i) {
$('ol').append('<li>');
$('ol li:first-child').addClass('slide-item-active');
});
$('ol li').bind('click', function() {
var index = $(this).index() + 1;
showSlide(index);
});
function nextSlide() {
var currentIndex = $('.active').index() + 1;
showSlide(currentIndex + 1);
}
function prevSlide() {
var currentIndex = $('.active').index() + 1;
showSlide(currentIndex - 1);
}
function showSlide(index) {
var slideId = "slide-item_" + index;
var $showSilde = $("#" + slideId);
var $activeSlide = $(".active");
$activeSlide.hide();
$activeSlide.removeClass("active");
$showSilde.addClass("active");
$showSilde.show();
$('.slide-item-active').removeClass('slide-item-active');
$('ol li').eq(index - 1).addClass('slide-item-active');
}
$("ul li").swipe({
swipeLeft: function(event) {
prevSlide();
},
swipeRight: function(event) {
nextSlide();
}
});
.slider-container ul {
list-style: none;
}
.slide-item {
top: 0;
width: 100%;
display: none;
}
.slide-item-imgwrap {
height: 270px;
width: 400px;
overflow: hidden;
}
.active {
display: block;
}
ol {
list-style: none;
width: 100%;
}
ol li {
background: #ccc;
border-radius: 50%;
display: inline-block;
width: 20px;
height: 20px;
cursor: pointer;
}
.slide-item-active {
background: #036;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.15/jquery.touchSwipe.min.js"></script>
<div class="slider-container">
<ul>
<li id="slide-item_1" class="slide-item active" data-id="1">
<div class="slide-item-imgwrap">
<img src="http://www.grindtv.com/wp-content/uploads/2011/10/faroe-islands.jpg" width="100%" />
</div>
</li>
<li id="slide-item_2" class="slide-item" data-id="2">
<div class="slide-item-imgwrap">
<img src="http://cruisingoutpost.com/wp-content/uploads/2013/06/IAT-Europe-Faroe-Islands.jpg" width="100%" />
</div>
</li>
<li id="slide-item_3" class="slide-item" data-id="3">
<div class="slide-item-imgwrap">
<img src="http://i.imgur.com/PIujv.jpg" width="100%" />
</div>
</li>
<li id="slide-item_4" class="slide-item" data-id="4">
<div class="slide-item-imgwrap">
<img src="http://www.icelandholidays.com/images/resorts/Locat-148-faroe.jpg" width="100%" />
</div>
</li>
</ul>
<ol></ol>
</div>
Related Query
- JavaScript/jQuery: How to make a task list with a running point value
- How to make any listItem under an ul sortable and enable dropping a new list item anywhere under the ul?
- How do i make a dropdown list and have content change when selected - my content is a jquery accordion?
- Autocomplete - how to make it query when clicked upon. Currently shows all the options displayed in the list
- How to make ajax postback in form with list of check boxes
- jQuery 2 dimensional array - How to loop through it and make a list based on a condition to the array value
- how to make a keyboard navigation using jquery?
- How to make horizontal navigation with localscroll.js
- How to make jqueryui autocomplete use just one list (ul) for all textboxes in page
- How to make Bootstrap Select Dropdown act like a Tab List with option elements that have role=tab?
- how to make a dropdown list using json format compatible with jquery
- How can I make my navigation bar have a smooth dropdown effect?
- Django - How to make anchors change HTML list
- How to Create a Smooth Scrolling Navigation with jQuery using a dropdown list instead of a nav bar
- How to make a drop down list which can be filtered by another drop down list in cshtml
- How to make an infinite horizontal scroll on list (li) elements
- How to make jquery autocomplete list items responsive
- How to make searchable list with unselected check box in to not visible div
- How to make a slideshow where the user can use navigation buttons, no timers
- How to make Jquery sortable affect other ul and list items?
- How to make the navbar dropdown list display horizontally, center aligned when screen size is bigger than breakpoint for collapse?
- I have an unordered list of dynamically created input list, How can I use jquery to make sure a user can't give two inputs the same answer?
- how to make Jquery swipe function work on whole page
- How to add options and conditionals using swipe events on a list element?
- How to add options and conditionals using swipe events on a list element?
- How do I make my navigation dropdown activate on hover in Bootstrap 4?
- How can I make horizontal/vertical scroll animation in/out?
- How to make an input to accept only two decimals and have maximum of 10 digits?
- how to make vertical carousal using twitter-bootstrap
- How to a Deserialize Json object made by JavaScriptSerializer from a List in jQuery/Javascript
- How can we get navigation toggle when more tabs are opened likein Firefox browser
- How do I make floated elements resize correctly
- Javascript, setInterval starts after while loop? how to make it start inside while loop?
- How to bind a new list of values to UL when Onchange event of Select option is fired using knockout.js?
- How to add jQuery multiselect to struts List jsps
- Form - How to save page info on button click on form instead of navigation to next page
- How do I make an accordion just using two buttons?
- how to use down arrow key navigation for textbox and autocomplete using jquery
- How do I make a ajax-loaded UL sortable in a JQuery UI dialog?
- How to make mobile devices not load an external JS
- How do i make so the div's overlap with eachother?
- How to make the select element the width of its current option
- how we make ckeditor dialog non resizable ,non draggable?
- Jquery how to make on click or on change with element with id ends with string
- How to make canvas responsive according to the div parent width
- list navigation that slides open to left to open, slides right to close
- How to make {{#each}} stop iterate at a certain condition
- How to make a sliding pane?
- How can I make jQuery dialogs not display on page-load in IE8?
- How can I make something 'appear' when a user scrolls down?
More Query from same tag
- how to stop all iron-list transitions being toggled - Polymer
- JQuery timepicker import issue
- Accessing Html/php file having Js inside it using ajax
- jquery 1.5 Ajax Requests, via Deferred Object, to PageMethod Not Executing as Expected
- how to check var's in jquery
- How to use youtube upload date as a time comparison to real date?
- Looping every time event click Jquery
- How to display popup model as per set time?
- Javascript object keep contain the old data
- How to call javascript method when user clicks on button(not on page_loadcomplete)?
- jQuery code - IE8 problem
- How to find a tr which has a specific class attached and get the details of each td - jquery
- DNN Search Module
- Same functionality with $.grep() as $(' ').filter();
- Get the Width of Div and LIMIT the mySQL query according to no of elements?
- Expand/Collapse on mobile page
- How to prevent showing loading spinner when a link is clicked on a page in android webview app?
- attaching position a div to a centered div relative to page
- Detect Close event of Side nav on MaterializeCSS
- what is the meaning of "url"+"serialized form" in $.getJSON
- Getting input of form for usage in php page
- How to detect in post.message null var?
- How to ensure that the complete data from web services is downloaded
- Kendo Grid Template with JQuery sparklines
- Validation alert in modal dialog
- Best Way to Transition CSS Style Height from "0" to "auto"
- Why is FormData.set turning my array into a string?
- Make sidebar thats longer than browser but not longer than content that scrolls together
- Open dialog on button click for dynamically added list items
- Show Loading Before Ajax call in scroll function