Evelyn
Reputation: 656
Flexslider doesn't work in filteration code
I know my question is quite similar to other people, but the filtering code is different.
My issue:
For "Category 1", the flexslider is working perfectly, but once I click "Category 2", the flexslider doesn't work. After inspecting the source code, the slides are having a inline style width="0px".
I have referred some other solutions and applied it on my side, but doesn't work.
"Category 1"
Click "Category 2"
What can i do to make it works? Hoping that some of you could provide me with some advice. Thanks!
var selCatId = null;
var pageLength = 8;
// Filters.
$('div.filter').on('click','a',function(e) {
e.preventDefault();
// Get the category id from the href attribute.
selCatId = $(this).attr('href').substring(1);
// Create pagination.
var nPages = Math.ceil($('div#item-wrapper ul.items li.'+selCatId).length / pageLength),
pages = [];
// Create and show page numbers.
for (var i=1; i<=nPages; i++)
pages.push('<a href="#">'+i+'</a>');
$('div.ctrl-nav').html(pages.join(''));
// Activate page number selection.
$('div.ctrl-nav a').click(function(e) {
e.preventDefault();
var pageInit = (parseInt($(this).text())-1)*pageLength;
$('div#item-wrapper ul.items li').hide()
.filter('.'+selCatId)
.slice(pageInit,pageInit+pageLength)
.show();
// Mark the active page.
$('div.ctrl-nav a').removeClass('selected').filter(this).addClass('selected');
});
// Show first page of the selected category.
$('div.ctrl-nav a:first').trigger('click');
});
// Show 'Category 1' when page loads.
$('div.filter a:first').trigger('click');
$(window).load(function(){
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel",
start: function(slider){
$('body').removeClass('loading');
}
});
$('#carousel1').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '#slider1'
});
$('#slider1').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel1",
start: function(slider){
$('body').removeClass('loading');
}
});
});div.ctrl-nav a {
padding: 5px;
margin-right: 2px;
color: white;
background: black;
}
div.ctrl-nav a.selected {
background: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://flexslider.woothemes.com/css/flexslider.css" rel="stylesheet"/>
<script src="http://yourjavascript.com/110250337118/jquery-flexslider.js"></script>
<div class="filter">
<a href="#category-1">category 1</a>
<a href="#category-2">category 2</a>
</div>
<div id="item-wrapper">
<ul class="items">
<li class="category-1">
<section class="slider">
<div id="slider" class="flexslider">
<ul class="slides">
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
</ul>
</div>
</section>
</li>
<li class="category-1">item 2</li>
<li class="category-1">item 3</li>
<li class="category-1">item 4</li>
<li class="category-1">item 5</li>
<li class="category-1">item 6</li>
<li class="category-2">
<section class="slider">
<div id="slider1" class="flexslider">
<ul class="slides">
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
</ul>
</div>
<div id="carousel1" class="flexslider">
<ul class="slides">
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
</ul>
</div>
</section>
</li>
<li class="category-2">item 8</li>
<li class="category-2">item 9</li>
<li class="category-2">item 10</li>
<li class="category-2">item 11</li>
<li class="category-2">item 12</li>
<li class="category-1">item 13</li>
<li class="category-1">item 14</li>
<li class="category-2">item 15</li>
</ul>
<div class="ctrl-nav">
<a href="#" id="prev">Previous</a><a href="#" id="next">Next</a>
</div>
</div>Upvotes: 3
Views: 478
Answers (2)
Masum billah
Reputation: 982
update your JavaScript. it solve your problem.
jsfiddel link
var selCatId = null;
var pageLength = 8;
// Filters.
$('div.filter').on('click','a',function(e) {
e.preventDefault();
// Get the category id from the href attribute.
selCatId = $(this).attr('href').substring(1);
// Create pagination.
var nPages = Math.ceil($('div#item-wrapper ul.items li.'+selCatId).length / pageLength),
pages = [];
// Create and show page numbers.
for (var i=1; i<=nPages; i++)
pages.push('<a class="'+i+'" href="#">'+i+'</a>');
$('div.ctrl-nav').html(pages.join(''));
// Activate page number selection.
$('div.ctrl-nav a').click(function(e) {
e.preventDefault();
var pageInit = (parseInt($(this).text())-1)*pageLength;
$('div#item-wrapper ul.items > li').hide();
//$('div#item-wrapper ul.items > li.'+selCatId)
$('div#item-wrapper ul.items > li.'+selCatId).slice(pageInit,pageInit+pageLength).show();;
// Mark the active page.
$('div.ctrl-nav a').removeClass('selected').filter(this).addClass('selected');
});
// Show first page of the selected category.
$('div.ctrl-nav a:first').trigger('click');
first(selCatId.split('-')[1]);
});
// Show 'Category 1' when page loads.
$('div.filter a:first').trigger('click');
function first(id){
$('#carousel'+id).flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '#slider'+id
});
$('#slider'+id).flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"+id,
start: function(slider){
$('body').removeClass('loading');
}
});
};
And Html
<div class="filter">
<a href="#category-1">category 1</a>
<a href="#category-2">category 2</a>
<a href="#category-3">category 3</a>
</div>
<div id="item-wrapper">
<ul class="items">
<li class="category-1">
<section class="slider">
<div id="slider1" class="flexslider">
<ul class="slides">
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/2.jpg" /></li>
<li><img src="http://responsiveslides.com/3.jpg" /></li>
</ul>
</div>
<div id="carousel1" class="flexslider">
<ul class="slides">
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/2.jpg" /></li>
<li><img src="http://responsiveslides.com/3.jpg" /></li>
</ul>
</div>
</section>
</li>
<li class="category-1">item 2</li>
<li class="category-1">item 3</li>
<li class="category-1">item 4</li>
<li class="category-1">item 5</li>
<li class="category-1">item 6</li>
<li class="category-2">
<section class="slider">
<div id="slider2" class="flexslider">
<ul class="slides">
<li><img src="http://responsiveslides.com/2.jpg" /></li>
<li><img src="http://responsiveslides.com/3.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
</ul>
</div>
<div id="carousel2" class="flexslider">
<ul class="slides">
<li><img src="http://responsiveslides.com/2.jpg" /></li>
<li><img src="http://responsiveslides.com/3.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
</ul>
</div>
</section>
</li>
<li class="category-2">item 8</li>
<li class="category-2">item 9</li>
<li class="category-2">item 10</li>
<li class="category-2">item 11</li>
<li class="category-2">item 12</li>
<li class="category-1">item 13</li>
<li class="category-1">item 14</li>
<li class="category-2">item 15</li>
<li class="category-1">item 16</li>
<li class="category-3">
<section class="slider">
<div id="slider3" class="flexslider">
<ul class="slides">
<li><img src="http://responsiveslides.com/3.jpg" /></li>
<li><img src="http://responsiveslides.com/2.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
</ul>
</div>
<div id="carousel3" class="flexslider">
<ul class="slides">
<li><img src="http://responsiveslides.com/2.jpg" /></li>
<li><img src="http://responsiveslides.com/3.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
</ul>
</div>
</section>
</li>
<li class="category-3">item 15</li>
<li class="category-3">item 15</li>
<li class="category-3">item 15</li>
<li class="category-3">item 15</li>
<li class="category-3">item 15</li>
<li class="category-3">item 15</li>
<li class="category-3">item 15</li>
<li class="category-3">item 15</li>
<li class="category-3">item 15</li>
<li class="category-3">item 15</li>
<li class="category-3">item 15</li>
</ul>
<div class="ctrl-nav">
<a href="#" id="prev">Previous</a><a href="#" id="next">Next</a>
</div>
</div>
Upvotes: 2
Masum billah
Reputation: 982
I found some issue in your html code. That is two id are same name (id="slider" and id="carousel") just update it slider1 and carousel1
I think your issue become solve.
<div id="slider" class="flexslider">
<div id="carousel" class="flexslider">
Fixed html code
<div class="filter">
<a href="#category-1">category 1</a>
<a href="#category-2">category 2</a>
</div>
<div id="item-wrapper">
<ul class="items">
<li class="category-1">
<section class="slider">
<div id="slider" class="flexslider">
<ul class="slides">
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
</ul>
</div>
</section>
</li>
<li class="category-1">item 2</li>
<li class="category-1">item 3</li>
<li class="category-1">item 4</li>
<li class="category-1">item 5</li>
<li class="category-1">item 6</li>
<li class="category-2">
<section class="slider">
<div id="slider1" class="flexslider">
<ul class="slides">
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
</ul>
</div>
<div id="carousel1" class="flexslider">
<ul class="slides">
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
<li><img src="http://responsiveslides.com/1.jpg" /></li>
</ul>
</div>
</section>
</li>
<li class="category-2">item 8</li>
<li class="category-2">item 9</li>
<li class="category-2">item 10</li>
<li class="category-2">item 11</li>
<li class="category-2">item 12</li>
<li class="category-1">item 13</li>
<li class="category-1">item 14</li>
<li class="category-2">item 15</li>
</ul>
<div class="ctrl-nav">
<a href="#" id="prev">Previous</a><a href="#" id="next">Next</a>
</div>
</div>
Relatively update your JavaScript code like below
$(window).load(function(){
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel",
start: function(slider){
$('body').removeClass('loading');
}
});
$('#carousel1').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '#slider1'
});
$('#slider1').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel1",
start: function(slider1){
$('body').removeClass('loading');
}
});
});
Upvotes: 0
Related Questions
- Flexslider Does Not Work in Firefox or Safari
- flexslider doesn't load properly
- Flexslider is not working
- JQuery flexslider not working
- Flexslider not working in html site (jQuery not loading?)
- Flexslider not working on auto generated content with Jquery
- flexigrid Ajax Filter by using flexOptions
- Flexslider not working with jquery selector
- Why is one of the selectors in Flexslider working and the second one isn't?
- Issues with Flexslider