I want to use Slick carousel on my website but i can't make the first example (single item) from kenwheeler.github.io/slick/ to work. Maybe i forgot something but i cannot find what.
Here is my code (also on jsfiddle) :
HTML
<div class="slider single-item slick-initialized slick-slider">
<div class="slick-list draggable" tabindex="0">
<div class="slick-track" style="opacity: 1; width: 4480px; transform: translate3d(-560px, 0px, 0px);">
<div class="slick-slide slick-cloned" index="-1" style="width: 560px;"><h3>6</h3></div>
<div class="slick-slide slick-active" index="0" style="width: 560px;"><h3>1</h3></div>
<div class="slick-slide" index="1" style="width: 560px;"><h3>2</h3></div>
<div class="slick-slide" index="2" style="width: 560px;"><h3>3</h3></div>
<div class="slick-slide" index="3" style="width: 560px;"><h3>4</h3></div>
<div class="slick-slide" index="4" style="width: 560px;"><h3>5</h3></div>
<div class="slick-slide" index="5" style="width: 560px;"><h3>6</h3></div>
<div class="slick-slide slick-cloned" index="6" style="width: 560px;"><h3>1</h3></div>
</div>
</div>
<button type="button" data-role="none" class="slick-prev" style="display: block;">Previous</button>
<button type="button" data-role="none" class="slick-next" style="display: block;">Next</button>
<ul class="slick-dots" style="display: block;">
<li class="slick-active"><button type="button" data-role="none">1</button></li>
<li><button type="button" data-role="none">2</button></li>
<li><button type="button" data-role="none">3</button></li>
<li><button type="button" data-role="none">4</button></li>
<li><button type="button" data-role="none">5</button></li>
<li><button type="button" data-role="none">6</button></li>
</ul>
</div>
jQuery
$(document).ready(function() {
$('.single-item').slick({
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
});
});
Thanks.
Edit : When i check event listeners on buttons with the developper tools, i've nothing, contrary to the same carousel on slick documentation (http://kenwheeler.github.io/slick/#demos).
On the Slick website, there is a click event listener on the next arrow button, as you can see on the screen :
I don't know why this event listener doesn't exist in local (jquery is correctly loaded by the way).
Many mistakes on your jsfiddle
Your HTML was a copy-paste that is already marked up by the library
You need to load jQuery before slick
You included a 1.12 jquery that doesnt exist(didn't matter but worth pointing out)
HTML:
<section id="features" class="blue">
<div class="content">
<div class="single-item">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
<div><h3>6</h3></div>
</div>
</div>
</section>
JS:
$(document).ready(function() {
$('.single-item').slick({
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
});
});
Here's a jsfiddle.
Related
I am using owl slider in my page. I have total 4 owl slider which comes dynamically on page. Problem is if I click on particular slider next then it also slides other 3 sliders blocks as well. below is my complete code. For understanding purpose here I have kept only 2 sliders.
<div class="category-block-inner">
<div class="box">boxes</div>
<div class="box">boxes</div>
<div class="box">boxes</div>
<div class="box">boxes</div>
<div class="owl-navigation">
<div class="previous arrows" id="previous">
<i class="fa fa-angle-left"></i>
</div>
<div class="next arrows" id="twonxt1">
<i class="fa fa-angle-right"></i>
</div>
</div>
</div>
</div>
<div class="category-block-inner">
<div class="box">boxes</div>
<div class="box">boxes</div>
<div class="box">boxes</div>
<div class="box">boxes</div>
<div class="owl-navigation">
<div class="previous arrows" id="previous">
<i class="fa fa-angle-left"></i>
</div>
<div class="next arrows" id="twonxt1">
<i class="fa fa-angle-right"></i>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
var category1 = $(".category-block-inner");
category1.owlCarousel({
pagination: false,
items: 2,
itemsDesktop: [1199, 2],
itemsDesktopSmall: [1024, 2],
itemsTablet: [768, 1],
itemsMobile: [479, 1],
});
$(".next").click(function () {
$(category1).trigger('owl.next');
});
$(".previous").click(function () {
$(category1).trigger('owl.prev');
});
});
</script>
Owl-carousel allows you to customize the "next- prev" buttons with a simple option:
navText: ["yourPrevButton","yourNextButton"]
Also html is permitted, so you can do everything you want. See all the options: https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
For your problem, you have to do multiple owl-carousel instance, not only 1. A solution could be to create a loop of owl-carousel istances (be careful: this solution works only if all carousel have same options.
Joining these 2 points you have a solution like this:
$(".category-block-inner").each(function(){
$(this).owlCarousel({
dots:false, // your pagination?
items: 2,
nav:true,
navText: ["MyPrevButton","MyNextButton"],
itemsDesktop: [1199, 2],
itemsDesktopSmall: [1024, 2],
itemsTablet: [768, 1],
itemsMobile: [479, 1],
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>
<div class="category-block-inner owl-carousel owl-theme">
<div class="item">boxes</div>
<div class="item">boxes</div>
<div class="item">boxes</div>
<div class="item">boxes</div>
</div>
<div class="category-block-inner owl-carousel owl-theme">
<div class="item">boxes</div>
<div class="item">boxes</div>
<div class="item">boxes</div>
<div class="item">boxes</div>
</div>
I have a bootstrap modal window and I want to hide a div element using javascript.
The bootstrap window is
<div class="modal hide editdialog" id="edit-dialog" data-backdrop="static" style="margin-top: -370px">
<div class="modal-header">
<div style="float: right; margin-right: 2px">
<a id="maximizebuttoneditor" href="#" onclick="maximizeEditor()" rel="tooltip" title="<spring:message code="label.Maximize" />"><i class="icon icon-fullscreen"></i></a>
<a id="restoredownbuttoneditor" style="display: none" href="#" onclick="restoreDownEditor()" rel="tooltip" title="<spring:message code="label.RestoreDown" />"><i class="icon icon-resize-small"></i></a>
</div>
<span id="edit-dialog-title"><spring:message code="label.Edit" /></span>
</div>
<div class="modal-body" style="max-height: 610px; height: 610px;">
<ul class="nav nav-tabs" id="edit-dialog-tabs">
<li><spring:message code="label.General" /></li>
<li id="question-dialog-advanced-tab"><spring:message code="label.Advanced" /></li>
<li><spring:message code="label.Dependencies" /></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="general" >
<div style="margin-top: 20px;" class="general-regex-dialog-questions" id="general-regex-dialog-questions">
<span class="overview-label"><spring:message code="label.RegEx" /></span><br />
<input id="question-dialog-regex" type="text" maxlength="255" />
<span id="question-dialog-regex-invalid" class="validation-error hide"><spring:message code="validation.NoRegExPattern" /></span>
</div>
</div>
<div class="tab-pane" id="advanced">
</div>
<div class="tab-pane" id="dependencies">
</div>
</div>
</div>
<div class="modal-footer">
<a id="btnEditOk" onclick="updateSurvey();" class="btn btn-info"><spring:message code="label.OK" /></a>
<a id="btnEditCancel" class="btn" onclick="selectedElement = null;$('#edit-dialog').modal('hide');"><spring:message code="label.Cancel" /></a>
</div>
</div>
I want to hide the div general-regex-dialog-questions
I use the following javascript code
$("#general-regex-dialog-questions").css({"display": "none !important"});
The div element isn't hidden.
I dont't understand why.
Maybe because it is inside the modal.
You can try it like this:
$(window).ready(function(){
$("#edit-dialog").find("#general-regex-dialog-questions").hide();
//or
$("#edit-dialog").find("#general-regex-dialog-questions").css({"display": "none"});
});
Hope it will help.
This syntax {"display": "none !important"} doesn't work because of the !important.
If you leave out the !important it works fine.
However, if you want to set the importance as well, you can set it like this:
$( '.foo' ).each(function () {
this.style.setProperty( 'display', 'none', 'important' );
});
To hide an element using jquery, you should use the .hide() method. If you want to show it back use .show().
If you might switch beetween the two you could also use .toggle() that will alternate the state (hidden/visible).
If it's still not working, try printing something when calling your event function to make sure your .hide() is called or print out the result of the selection $("#...")
$("#test").click( function(e){
$("#test").hide();
} );
function show() {
$("#test").show()
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1> Title </h1>
<button onclick="show()">Show it back</button>
<div id="test" style="background-color: #CCC">
<h2>Bunch of stuff</h2>
<p>Blabla blabla blabla <br>
Click on me to make me disappear </p>
<span> I'm a span and I dissapear too </span>
</div>
<p> Bunch of stuff that will not disappear neither </p>
I am using owl carousel to display product.The problem is that next and previous buttons are not showing up.
Here are the files I have included
owl.carousel.min.css
owl.theme.default.min.css
owl.carousal.min
In main.js
jQuery(document).ready(function ($) {
$('.owl-carousel-featured-product').owlCarousel({
loop:true,
margin:10,
nav:true,
dots:false,
items:4,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
});
});
Below is generated HTML
<div class="owl-carousel-featured-product featured-product">
<div class="owl-wrapper-outer">
<div class="owl-wrapper" style="width: 7410px; left: 0px; display: block;">
<div class="owl-item" style="width: 285px;">
<div class="productslide">
</div>
</div>
</div>
<div class="owl-controls clickable">
<div class="owl-pagination">
<div class="owl-page active">
<span class=""></span>
</div>
<div class="owl-page">
<span class=""></span>
</div>
<div class="owl-page">
<span class=""></span>
</div>
<div class="owl-page">
<span class=""></span>
</div>
</div>
</div>
Although the nav:true option is set and still not showing up the prev & Next button html is not rendered.
I have an issue with jQuery & jEasyUI working together. In my code I have a button that when it is clicked it adds a new col-sm-3 to a row div. When I begin dragging around into the droppable nothing happens, although I'm suppose to see an alert. I played around and got it to work by calling .droppable() on newly added columns. That's where things began to get strange. The draggables started disappearing from their positions in the list. It was obvious that jQuery and JEasyUI are not playing well. JEasyUI has it's own draggable & droppable functions but there isn't anything written on how they could be applied to dynamically loaded DOM elements.
Code dynamically added:
This is HTML that I dynamically add to a row
<div class="col-sm-4" >
<div class="box options-list">
<div class="box-header with-border">
<h3 class="box-title"></h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<input class="form-control" placeholder="Name">
<div class="row">
<div class="col-xs-6">
<div id='validate-checkbox' class="checkbox icheck">
<label>
<label for="validate-checkbox"></label>
<input class="validate-checkbox" name="is_disabled" type="checkbox"> Validate
</label>
</div>
</div>
<div class="col-xs-6">
<div id='conform-value-checkbox' class="checkbox icheck">
<label>
<label for="conform-value-checkbox"></label>
<input class="validate-checkbox" name="is_disabled" type="checkbox"> Conform
</label>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<ul class="">
</ul>
</div>
</div>
</div>
</div>
</div>
Static:
The element where the new element is appended to is <div class="row" id="sortable">
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
.col-sm-4 .ui-sortable-placeholder {
background: red;
}
</style>
<div class="box">
<div class="box-body">
<div class="row">
<div class="col-md-6">
<?= $this->Form->input('name', ['placeholder' => 'Enter part name']) ?>
</div>
<div class="col-lg-6">
<?= $this->Form->input('description', ['placeholder' => '(Optional)']) ?>
</div>
</div>
<div class="row">
<div class="col-md-8">
<?= $this->Form->input('item_part_type_id', ['label' => 'Type']) ?>
</div>
<div class="col-md-4">
<label for="has-validation-checkbox"></label>
<div id='has-validation-checkbox' class="checkbox icheck">
<label>
<input class="has-validation-checkbox" name="has_validation" type="checkbox"> Force Validation
</label>
</div>
</div>
</div>
</div>
</div>
<div class="box">
<div class="box-header with-border">
<h3 class="box-title"><strong>Part Editor</strong></h3>
</div>
<div class="box-body">
<div class="row">
<div class="col-xs-12">
<div class="easyui-layout" style="width:100%;height:400px;">
<div data-options="region:'east',split:true" title="Existing Miniparts" style="width:20%;">
</div>
<div data-options="region:'west',split:true" title="Options" style="width:20%;">
<ul class="list-group" id="options-list">
<li class=" bg-black-gradient list-group-item">
Text<span class="pull-right"><i class="fa fa-cog"></i></span>
</li>
<li class="bg-black-gradient list-group-item">
Textarea
</li>
<li class="bg-black-gradient list-group-item">
List
</li>
<li class="bg-black-gradient list-group-item">
Fabric
</li>
<li class="bg-black-gradient list-group-item">
Multi Fabric
</li>
<li class="bg-black-gradient list-group-item">
Buyin Code
</li>
<li class="bg-black-gradient list-group-item">
Buyin Supplier
</li>
</ul>
</div>
<div id="here" data-options="region:'center',title:'Miniparts'" style="width: 60%; padding:5px;" class="bg-black-gradient" >
<div class="row" id="sortable">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box-footer">
<button id="add-part-btn" class="btn btn-primary btn-sm pull-right"><i class="fa fa-plus"></i> Add Part</button>
</div>
</div>
<div class="well clearfix">
<div class="pull-right">
<button class="btn btn-default btn-md"><i class="fa fa-times"></i> Discard Changes</button>
<button class="btn btn-primary btn-md"><i class="fa fa-save"></i> Save Changes</button>
</div>
</div>
<script>
/*
Each time this is triggered a new element is to be
added to the sortable <div class="row">. The element then
accepts a droppable from a UL list */
$('#add-part-btn').click(function() {
$.get("<?= $this->Url->build(['action' => 'minipart']) ?>", function (data) {
var newElement = $(data);
$('#sortable').append(newElement);
$(newElement).droppable({
accept: '.list-group-item',
drop: function(e,ui)
{
alert("AahhH! my foot!");
}
})
});
});
$(function(){ // DOM Ready
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
/* If I put into the DOM Ready function above,the list item being dragged to behave strangely
* So I left it out here instead. */
$( ".list-group-item").draggable({
revert: true,
appendTo: '.easyui-layout',
helper: 'clone',
zIndex: 3
}).disableSelection();
</script>
My project has so many dependencies that I don't think you will be able to run the snippets probably, but if you want to go the extra mile and help me out on this then please download the following dependencies below:
jQuery >=1.11.x
jQueryUI jEasyUI latest version
AdminLTE 2.1.1 (A bootstrap 3 theme, https://github.com/almasaeed2010/AdminLTE)
end developer. I have little problem with sliders in tabs. My sliders work but while i switch to second slider I can't see it. slider lost width and height If I resize site by responsive tools of firefox slider generates width and height. I used resizeFix() and reInit() but doesn't work
Can Anybody Help Me?
HTML
<ul id="tabs-wrapper" class="nav nav-tabs" data-tabs="tabs">
<li id="tabs-button" class="active">Projects</li>
<li id="tabs-button">Shots</li>
</ul>
</div>
<!-- Tab panes -->
<div class="tab-content">
<!-- First slider -->
<div class="tab-pane fade in active" id="home">
<div class="device">
<div class="arrows">
<a class="arrow-left al1" href="#"></a>
<a class="arrow-right ar1" href="#"></a>
</div>
<div class="swiper-container s1">
<div class="swiper-wrapper" style="width:100%; height:100%;">
<div class="swiper-slide">
<div class="content-slide">
<h3 class="title">Slide with HTML</h3>
website
</div>
<img class="img-work" src="images/drop1.jpg">
</div>
<div class="swiper-slide">
<div class="content-slide">
<h3 class="title">Slide with HTML</h3>
website
</div>
<img class="img-work" src="images/nu.jpg">
</div>
</div>
</div>
<div class="pagination p1"></div>
</div>
</div>
<!-- Second slider -->
<div class="tab-pane fade" id="profile">
<div class="device">
<div class="arrows">
<a class="arrow-left al2" href="#"></a>
<a class="arrow-right ar2" href="#"></a>
</div>
<div class="swiper-container s2">
<div class="swiper-wrapper" style="width:100%; height:100%;">
<div class="swiper-slide">
<div class="content-slide">
<h3 class="title">Slide with HTML</h3>
website
</div>
<img class="img-work" src="images/drop1.jpg">
</div>
<div class="swiper-slide">
<div class="content-slide">
<h3 class="title">Slide with HTML</h3>
website
</div>
<img class="img-work" src="images/nu.jpg">
</div>
</div>
</div>
<div class="pagination p2"></div>
</div>
</div>
CSS
.swiper-container {
width: auto;
height: auto;
cursor: default !important;
min-height: 729px !important;
}
JS
<script>
var Swiper1 = new Swiper('.s1',{
pagination: '.p1',
loop:true,
grabCursor: true,
paginationClickable: true
})
$('.al1').on('click', function(e){
e.preventDefault()
Swiper1.swipePrev()
})
$('.ar1').on('click', function(e){
e.preventDefault()
Swiper1.swipeNext()
})
var Swiper2 = new Swiper('.s2',{
pagination: '.p2',
loop:true,
grabCursor: true,
paginationClickable: true
})
$('.al2').on('click', function(e){
e.preventDefault()
Swiper2.swipePrev()
})
$('.ar2').on('click', function(e){
e.preventDefault()
Swiper2.swipeNext()
})
$('#shots_button').on('click', function() {
Swiper2.resizeFix() ;
Swiper2.reInit() ;
});
</script>
You need to use 'update' method on Swiper instance for latest versions of Swiper in place of something like reInit() or resizeFix().
Tested on Swiper 3.4.2:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
slider.update();
}
Ok i did the porblem was it bootstrap tabs i used this code
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
slider2.resizeFix(true);
slider1.resizeFix(true);