Inside each 'slide' of my slickCarousel I have 5 cards displayed (on desktop). On mobile however, I need the first card to be as slide one, second card to be as slide 2 etc.
http://kenwheeler.github.io/slick/#settings
Desktop
<slide 1>
[1][2]
[3][4][5]
</slide 1>
<slide 2>
[6][7]
[8][9][10]
</slide 2>
What I currently have on Mobile too
<slide 1>
[1][2]
[3][4][5]
</slide 1>
<slide 2>
[6][7]
[8][9][10]
</slide 2>
What I need on Mobile
<slide 1>
[1]
</slide 1>
<slide 2>
[2]
</slide 2>
<slide 3>
[3]
</slide 3>
<slide 4>
[4]
</slide 4>
<slide 5>
[5]
</slide 5>
<slide 6>
[6]
</slide 6>
<slide 7>
[7]
</slide 7>
<slide 8>
[8]
</slide 8>
<slide 9>
[9]
</slide 9>
<slide 10>
[10]
</slide 10>
JSFiddle
https://jsfiddle.net/tr0pec2m/
$(function () {
$(".regular").slick({
dots: true,
infinite: false,
slidesToShow: 1,
slidesToScroll: 1
});
});
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.slider {
width: 50%;
margin: 25px auto;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
border: 1px solid #000;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.hidde-sldie img {
border: 5px solid red;
}
.show-hide-slide-btn {
text-align: center;
margin: 0 auto;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<section class="regular slider">
<div>
<img src="http://placehold.it/150x100?text=1">
<img src="http://placehold.it/150x100?text=2">
<img src="http://placehold.it/150x100?text=3">
<img src="http://placehold.it/150x100?text=4">
<img src="http://placehold.it/150x100?text=5">
</div>
<div>
<img src="http://placehold.it/150x100?text=6">
<img src="http://placehold.it/150x100?text=7">
<img src="http://placehold.it/150x100?text=8">
<img src="http://placehold.it/150x100?text=9">
<img src="http://placehold.it/150x100?text=10">
</div>
</section>
The responsive settings are not quite what I need here, the responsive settings will deal with the number of SLIDES to appear. Currently I only have 1 slide with multiple items inside as far as slickCarousel knows.
I need the cards to be split into multiple slides, so Slick can then deal with all 10 slides instead.
If possible, add all the slider items as the direct child and use the responsive config of the slick slider
$(".regular").slick({
dots: true,
infinite: false,
vertical: true,
slidesToShow: 5,
slidesToScroll: 5,
responsive: [
{
breakpoint: 500,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
}
}
]
});
https://jsfiddle.net/tr0pec2m/2/
You Have to change HTML strcture, and add js parameter
<section class="regular slider">
<img src="https://placehold.it/150x100?text=1">
<img src="https://placehold.it/150x100?text=2">
<img src="https://placehold.it/150x100?text=3">
<img src="https://placehold.it/150x100?text=4">
<img src="https://placehold.it/150x100?text=5">
<img src="https://placehold.it/150x100?text=6">
<img src="https://placehold.it/150x100?text=7">
<img src="https://placehold.it/150x100?text=8">
<img src="https://placehold.it/150x100?text=9">
<img src="https://placehold.it/150x100?text=10">
</section>
$(function () {
$(".regular").slick({
dots: true,
infinite: false,
slidesToShow: 1,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1000,
settings: {
slidesToShow: 6,
slidesToScroll: 1
}
},
{
breakpoint: 800,
settings: {
slidesToShow: 3,
slidesToScroll: 1
}
},
{
breakpoint: 500,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
Related
Currently I'm using React-slick for my horizontal card scrollview, but the output is not what I exactly want. What I'm trying to achieve is this:
Where the 1 card in the front and 1 card in the back are shown half and the arrows overlap the front and back card.
But currently my arrows show up in the start and end of the cards and all the cards are equally fit in one page.
CodeSandbox: https://codesandbox.io/s/gallant-chaplygin-jydsu?file=/src/App.tsx
Code:
function SampleNextArrow(props) {
const { className, style, onClick } = props;
return (
<div className={className} style={{ background: "#fff" }} onClick={onClick}>
<img
style={{ width: "20px" }}
src="https://www.pngfind.com/pngs/m/302-3023323_arrow-pointing-to-right-comments-right-arrow-png.png"
/>
</div>
);
}
function SamplePrevArrow(props) {
const { className, style, onClick } = props;
return (
<div className={className} style={{ background: "#fff" }} onClick={onClick}>
<img
style={{ width: "20px" }}
src="https://toppng.com/uploads/preview/arrow-pointing-to-the-left-115501167743epfu1fapc.png"
/>
</div>
);
}
export default class Responsive extends Component {
render() {
var settings = {
dots: true,
infinite: false,
speed: 500,
slidesToShow: 4,
slidesToScroll: 4,
initialSlide: 0,
nextArrow: <SampleNextArrow />,
prevArrow: <SamplePrevArrow />,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
initialSlide: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
};
return (
<div>
<h2> Responsive </h2>
<Slider {...settings}>
<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>
</Slider>
</div>
);
}
}
You need to customize the slack css and change the default slack styles. Add bellow styles to css which have imported to the component:
.slick-prev {
left: 0 !important;
z-index: 1000;
}
.slick-prev:before {
content: "";
}
.slick-next {
right: 0 !important;
z-index: 1000;
}
.slick-next:before {
content: "";
}
Also for showing the cards not in fit mode, you need to add the centerMode setting to slack settings:
className: "center",
centerMode: true,
centerPadding: "60px",
Plus, add these styles:
.center .slick-center h3 {
opacity: 1;
-ms-transform: scale(1.08);
transform: scale(1.08);
}
h3 {
background: #5f9ea0;
color: #fff;
font-size: 36px;
line-height: 100px;
margin: 10px;
padding: 2%;
position: relative;
text-align: center;
}
I have data in slick js slider
I want to reload another data and reinit slick with new data.
I tried this :
Here is the function:
function getSliderSettings(){
return {
slidesToShow: 1,
slidesToScroll: 1,
rows: 2,
slidesPerRow: 3,
centerMode: false,
arrows: false,
dots: true,
infinite: false,
responsive: [
{
breakpoint: 1100,
settings: {
slidesPerRow: 2,
slidesToScroll: 1
}
}
]
}
}
code for re-init slider
var data = "<div>a</div><div>b</div>";
$("#categorySlider-13").slick('reinit');
$("#categorySlider-13").html(data);
$("#categorySlider-13").slick(getSliderSettings());
But it doesnt work !
If You know another js plugin carousel working with ajax call, can you tell it to me please ?
You need to call $("#categorySlider-13").slick('unslick') before assigning new data then init again.
Also, it advised to use .not('.slick-initialized'), so you done accidentally initialize slider more than once See here for more
function getSliderSettings(){
return {
slidesToShow: 1,
slidesToScroll: 1,
rows: 2,
slidesPerRow: 3,
centerMode: false,
arrows: false,
dots: true,
infinite: false,
responsive: [
{
breakpoint: 1100,
settings: {
slidesPerRow: 2,
slidesToScroll: 1
}
}
]
}
}
$("#categorySlider-13").slick(getSliderSettings());
$('#btn1').on('click',function(){
var data = "<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>";
$("#categorySlider-13").slick('unslick')
$("#categorySlider-13").html(data);
$("#categorySlider-13").not('.slick-initialized').slick(getSliderSettings());
});
$c1: #3a8999;
$c2: #e84a69;
.slider {
width: auto;
margin: 30px 50px 50px;
}
.slick-slide {
background: #3a8999;
color: white;
padding: 40px 0;
font-size: 30px;
font-family: "Arial", "Helvetica";
text-align: center;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-dots {
bottom: -30px;
}
.slick-slide:nth-child(odd) {
background: #e84a69;
}
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<section id ="categorySlider-13" class="slider">
<div>slide1</div>
<div>slide2</div>
<div>slide3</div>
<div>slide4</div>
<div>slide5</div>
<div>slide6</div>
</section>
<button id="btn1" >
Click me!!
</button>
i am using owl carousel and i want to change the default nav buttons "prev next" with arrows and place them on the right side and left side in carousel.
See the picture:
https://postimg.org/image/w4od5pb2z/
http://raffe.ro/bogdan.v/one-page/
Here is the js code:
< script >
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
autoplay: true,
autoplayTimeout: 3000,
smartSpeed: 900,
autoplayHoverPause: false,
loop: true,
margin: 30,
nav: false,
dotsEach: true,
touchDrag: true,
dotData: true,
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1
}
}
})
}) <
/script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
Place the following code in your css (style.css):
.owl-nav .owl-prev,
.owl-nav .owl-next {
position: absolute;
top: 50%;
left: 0;
transform: translate(0,-50%);
}
.owl-nav .owl-next {
left: auto;
right: 0;
}
In theory, it should work
I have a JavaScript slider that I want to be 100% of the width.
Here is my HTML:
<div id="mhblindsshow">
<style type="text/css"> #mhblindsshow img { display:none; } </style>
<img src="images/main/1.jpg" />
<img src="images/main/2.jpg" />
</div>
Here is my CSS:
.mhSlideshow {
position:relative;
display:block;
margin:0 auto;
}
.mhSlideshow img {
position:absolute;
top:0px;
left:0px;
display:none;
}
and here is the javacript that controls the width.
$(document).ready(function () {
$("#mhblindsshow").mhslideshow({
width: $(window).width(), height: 500,
scaleMode: 'scaleToFill',
firstSlide: 0,
randomPlay: false,
autoPlay: true,
showShadow: false,
loopForever: true, loop: 0,
showBorder: false, borderSize: 6, borderColor: '#FFFFFF',
effectMode: 'blind', interval: 2500, effectSpeed: 1000,
totalSlices: 5, sliceInterval: 50,
showCaption: false,
textCSS: '.title {
font-size:12px;
font-weight:bold;
font-family:Arial;
color:#ffffff;
line-height:200%;
}
.alt {
font-size:12px;
font-family:Arial;
color:#ffffff;
}',
captionPosition: 'bottom', captionBarColor: '#333333', captionBarOpacity: 0.8,
captionBarPadding: 8, captionAlign: 'center',
showNavArrows: true, autoHideNavArrows: false,
showNavDots: true, navDotsBottom: 6,
navDotsAlign: 'right', navDotsLeftRightMargin: 16,
effect: 'fade',
jsFolder: 'js'
});
});
If my image is larger/smaller then the window, the image doesn't fit to 100%.
I would want the image width to always be 100% and the height should be flexible based on image ratio.
I tried adding width:100% in the CSS, but it didn't change anything.
$("img").css("height","100%");
$("img").css("width","100%");
this code require jquery library
and U should use class or id at html so will be img.class or img#id
I'm making a slideshow that works with a responsive layout. After hours of work the slideshow is now responsive to the layout, but because of the width being 100% options fn:'scrollHorz' isn't working correctly. Because the width: 100% is being given to the left: style on the class. So my question is how can I get this to work. I would really appreciate any help.
This is my markup
<div id="test">
<section>
<img src="images/sliderContent_1.png" alt="Slide 1" />
</section>
<section>
<img src="images/sliderContent_1.png" alt="Slide 2" />
</section>
<section>
<img src="images/sliderContent_1.png" alt="Slide 2" />
</section>
</div>
this my css
section {
margin: 0;
}
img {
max-width: 100%;
}
img.loading {
margin-bottom: 2em;
visibility: hidden;
}
#page-wrapper-test {
width: 100%;
margin: 0 auto;
}
#test {
width: 100%;
}
div.loading {
width: 100%;
}
#test section { width: 100%; }
and this is my script
$(document).ready(function() {
$('#test').prepend('<img class="loading" src="images/loading.gif" />');
$('#test').after('<div id="nav" class="nav">');
$('#test').cycle({
slideExpr: 'section',
fx: 'scrollHorz',
timeout: 0,
pager: '#nav',
next: '#test',
slideResize: true,
containerResize: false,
width: '100%',
fit: 1,
});
});
Did you try setting the slideResize to false? This way the cycle pluggin doesn't change your css props.
Doesn't work with 100% width
I had the same problem, but with scrollVert, and this solved the issue.
You need to set height property for your jQuery cycle. There's some strange behavior with scrollHorz. I'd suggest you to use scrollLeft instead. But then you would need to set custom function for pager to scrollRight when needed.
Here's how your JS snippet should look like:
$('#test').prepend('<img class="loading" src="" />');
$('#test').after('<div id="nav" class="nav">');
$('#test').cycle({
slideExpr: 'section',
fx: 'scrollLeft',
timeout: 1000,
pager: '#nav',
next: '#test',
slideResize: true,
containerResize: false,
width: '100%',
height: "100px",
fit: 1,
});
Here's how you can use custom functions for your pager:
var $test = $('#test');
$test.prepend('<img class="loading" src="" />');
$test.after('<div id="nav" class="nav">');
$test.cycle({
slideExpr: 'section',
fx: 'scrollLeft',
timeout: 2000,
pager: '#nav',
next: '#test',
slideResize: true,
containerResize: false,
width: '100%',
height: "200px",
fit: 1,
after: function(currSlideElement, nextSlideElement, options) {
slideIndex = options.currSlide;
nextIndex = slideIndex + 1;
prevIndex = slideIndex -1;
if (slideIndex == options.slideCount-1) {
nextIndex = 0;
}
if (slideIndex == 0) {
prevIndex = options.slideCount-1;
}
},
pageAnchorBuilder: function(idx, slide) {
return '' + idx + 'a';
}
});
var $navChildren = $('#nav').children();
$navChildren.unbind('click');
$navChildren.click( function(e) {
var idx = $navChildren.index(this);
if (idx < slideIndex) {
$test.cycle( idx, 'scrollRight' );
}
else if (idx > slideIndex) {
$test.cycle( idx );
}
e.preventDefault();
});
Check it out here:
http://jsfiddle.net/vfonic/uTpqB/
Cycle makes the next child level of elements down from the parent slideshow container the slides. In your example <section>.
You should define the height and width of the slide elements in your CSS. Otherwise when (document).ready fires and your images are partially loaded you will get unexpected results.