Slick JS - How to reload content with ajax data - javascript

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>

Related

jQuery inView with anime.js only fire once

I'm making an animation atm and wanted to animate a text once when I scroll there. Here is the code. The code works all fine I don't know why it won't work here. But I saw that the text fires every time I scroll there. How can I prevent this? So it only fires once?
var fadeUpNormal = anime.timeline({
loop: false,
autoplay: false,
}).add({
targets: '.fade-up-normal',
translateY: [100,0],
opacity: [0,1],
translateZ: 0,
easing: 'easeOutExpo',
duration: 1400,
delay: 1000;
});
$('.scroll-trigger').on('inview', function(event, isInView) {
if (isInView) {
fadeUpNormal.play();
} else {}
});
div {
background-color: #444;
height: 1000px;
display: flex;
justify-content: center;
align-items: center;
}
#wwrp1 {
color: black;
font-size: 3rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<div>
<div>
<p class="fade-up-normal scroll-trigger" id="wwrp1">This is an example</p>
</div>
</div>
The solution is just to use .one('inview') for .on('inview'). That was my bad!

React Horizontal Scrolling cards with Arrows on top

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;
}

Why does width:0 not animate (anime.js)

I am trying to create an animation with the width of an element, but even this basic code doesn't work and I can't figure out why, maybe someone can.
<script src="anime.min.js"></script>
<script src="jquery-3.1.0.js"></script>
<div id="centered">
</div>
<style>
#centered {
width: 500px;
height: 40vh;
background-color: blueviolet;
}
</style>
<script>
let t = anime.timeline({
target: '#centered',
loop: false,
autoplay: false,
width: 0,
duration: 1000,
});
t.play();
</script>
How about the following solutions?
Example 1 (With timeline)
var t = anime.timeline({
duration: 1000,
loop: false,
autoplay: false,
});
t.add({
targets: '#centered',
width: 0
})
t.play();
Example 2 (Without timeline)
var t = anime({
duration: 1000,
loop: false,
autoplay: false,
targets: '#centered',
width: 0
});
t.play();
For more information, it's better to check an official document.
https://animejs.com/documentation/
Your 'target' should be targets (plural). Following documentation, you should be adding (what I would call) keyframes via .add according to the timeline basics. Not certain if you need it explicitly.
let t = anime.timeline({
targets: '#centered',
loop: false,
autoplay: false
});
t.add({ width: 0, duration: 1000 });
t.play();
#centered {
width: 27px;
height: 40vh;
background-color: blueviolet;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="centered">
</div>

Reposition nav buttons inside owl carousel

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

Can't resize image to 100% in javascript

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

Categories

Resources