How to get out from slick slider and go to the next section?
0
I am developing a site where I want to change slides using scroll, and I have done it using slick slider, but when the slides ends its not going to the next section on scroll. I need to drag the scrollbar manually to go the next section. How to do all that stuff on mouse scroll?
Heres My Html:
<div class="banner banner-full banner-full-slider">
<div class="banner-slides d-flex align-items-center">
<div class="banner-slides-left d-flex w-50 justify-content-center">
</div>
<div class="banner-slides-right d-flex w-50 justify-content-center">
<img src="assets/img/iphone-x-frame.png" alt="" class="img-fluid">
</div>
</div>
<div class="banner-slides">
<div class="banner-slides-left d-flex w-50 justify-content-center">
<img src="assets/img/iphone-x-frame.png" alt="" class="img-fluid">
</div>
<div class="banner-slides-right d-flex w-50 justify-content-center">
</div>
</div>
<div class="banner-slides d-flex align-items-center">
<div class="banner-slides-left d-flex w-50 justify-content-center">
</div>
<div class="banner-slides-right d-flex w-50 justify-content-center">
<img src="assets/img/iphone-x-frame.png" alt="" class="img-fluid">
</div>
</div>
</div>
<main class="site-content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil incidunt sapiente cumque? Obcaecati, maxime consequuntur illum quia a necessitatibus mollitia rerum harum neque impedit nostrum tenetur ad perferendis. Dolores rerum repellendus excepturi omnis ex deserunt quidem saepe, assumenda doloribus recusandae minima labore molestiae in beatae adipisci! Praesentium laborum beatae fuga.
</main>
Here's the JS:
$(document).ready(function () {
var $slider = $(".banner-full-slider");
$slider.
on('init', function () {
mouseWheel($slider);
}).
slick({
dots: false,
infinite: false,
fade: true,
cssEase: 'linear',
arrows: false,
});
function mouseWheel($slider) {
$(window).on('wheel', {
$slider: $slider
}, mouseWheelHandler);
}
function mouseWheelHandler(event) {
event.preventDefault();
var $slider = event.data.$slider;
var delta = event.originalEvent.deltaY;
if (delta > 0) {
$slider.slick('slickPrev');
} else {
$slider.slick('slickNext');
}
}
});
javascript html slider
edited Nov 24 '18 at 17:02
Gal Margalit
2,74823143
asked Nov 24 '18 at 13:20
Sayantan ChandraSayantan Chandra
298
add a comment |
0
I am developing a site where I want to change slides using scroll, and I have done it using slick slider, but when the slides ends its not going to the next section on scroll. I need to drag the scrollbar manually to go the next section. How to do all that stuff on mouse scroll?
Heres My Html:
<div class="banner banner-full banner-full-slider">
<div class="banner-slides d-flex align-items-center">
<div class="banner-slides-left d-flex w-50 justify-content-center">
</div>
<div class="banner-slides-right d-flex w-50 justify-content-center">
<img src="assets/img/iphone-x-frame.png" alt="" class="img-fluid">
</div>
</div>
<div class="banner-slides">
<div class="banner-slides-left d-flex w-50 justify-content-center">
<img src="assets/img/iphone-x-frame.png" alt="" class="img-fluid">
</div>
<div class="banner-slides-right d-flex w-50 justify-content-center">
</div>
</div>
<div class="banner-slides d-flex align-items-center">
<div class="banner-slides-left d-flex w-50 justify-content-center">
</div>
<div class="banner-slides-right d-flex w-50 justify-content-center">
<img src="assets/img/iphone-x-frame.png" alt="" class="img-fluid">
</div>
</div>
</div>
<main class="site-content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil incidunt sapiente cumque? Obcaecati, maxime consequuntur illum quia a necessitatibus mollitia rerum harum neque impedit nostrum tenetur ad perferendis. Dolores rerum repellendus excepturi omnis ex deserunt quidem saepe, assumenda doloribus recusandae minima labore molestiae in beatae adipisci! Praesentium laborum beatae fuga.
</main>
Here's the JS:
$(document).ready(function () {
var $slider = $(".banner-full-slider");
$slider.
on('init', function () {
mouseWheel($slider);
}).
slick({
dots: false,
infinite: false,
fade: true,
cssEase: 'linear',
arrows: false,
});
function mouseWheel($slider) {
$(window).on('wheel', {
$slider: $slider
}, mouseWheelHandler);
}
function mouseWheelHandler(event) {
event.preventDefault();
var $slider = event.data.$slider;
var delta = event.originalEvent.deltaY;
if (delta > 0) {
$slider.slick('slickPrev');
} else {
$slider.slick('slickNext');
}
}
});
javascript html slider
edited Nov 24 '18 at 17:02
Gal Margalit
2,74823143
asked Nov 24 '18 at 13:20
Sayantan ChandraSayantan Chandra
298
add a comment |
0
0
0
I am developing a site where I want to change slides using scroll, and I have done it using slick slider, but when the slides ends its not going to the next section on scroll. I need to drag the scrollbar manually to go the next section. How to do all that stuff on mouse scroll?
Heres My Html:
<div class="banner banner-full banner-full-slider">
<div class="banner-slides d-flex align-items-center">
<div class="banner-slides-left d-flex w-50 justify-content-center">
</div>
<div class="banner-slides-right d-flex w-50 justify-content-center">
<img src="assets/img/iphone-x-frame.png" alt="" class="img-fluid">
</div>
</div>
<div class="banner-slides">
<div class="banner-slides-left d-flex w-50 justify-content-center">
<img src="assets/img/iphone-x-frame.png" alt="" class="img-fluid">
</div>
<div class="banner-slides-right d-flex w-50 justify-content-center">
</div>
</div>
<div class="banner-slides d-flex align-items-center">
<div class="banner-slides-left d-flex w-50 justify-content-center">
</div>
<div class="banner-slides-right d-flex w-50 justify-content-center">
<img src="assets/img/iphone-x-frame.png" alt="" class="img-fluid">
</div>
</div>
</div>
<main class="site-content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil incidunt sapiente cumque? Obcaecati, maxime consequuntur illum quia a necessitatibus mollitia rerum harum neque impedit nostrum tenetur ad perferendis. Dolores rerum repellendus excepturi omnis ex deserunt quidem saepe, assumenda doloribus recusandae minima labore molestiae in beatae adipisci! Praesentium laborum beatae fuga.
</main>
Here's the JS:
$(document).ready(function () {
var $slider = $(".banner-full-slider");
$slider.
on('init', function () {
mouseWheel($slider);
}).
slick({
dots: false,
infinite: false,
fade: true,
cssEase: 'linear',
arrows: false,
});
function mouseWheel($slider) {
$(window).on('wheel', {
$slider: $slider
}, mouseWheelHandler);
}
function mouseWheelHandler(event) {
event.preventDefault();
var $slider = event.data.$slider;
var delta = event.originalEvent.deltaY;
if (delta > 0) {
$slider.slick('slickPrev');
} else {
$slider.slick('slickNext');
}
}
});
javascript html slider
edited Nov 24 '18 at 17:02
Gal Margalit
2,74823143
asked Nov 24 '18 at 13:20
Sayantan ChandraSayantan Chandra
298
I am developing a site where I want to change slides using scroll, and I have done it using slick slider, but when the slides ends its not going to the next section on scroll. I need to drag the scrollbar manually to go the next section. How to do all that stuff on mouse scroll?
Heres My Html:
<div class="banner banner-full banner-full-slider">
<div class="banner-slides d-flex align-items-center">
<div class="banner-slides-left d-flex w-50 justify-content-center">
</div>
<div class="banner-slides-right d-flex w-50 justify-content-center">
<img src="assets/img/iphone-x-frame.png" alt="" class="img-fluid">
</div>
</div>
<div class="banner-slides">
<div class="banner-slides-left d-flex w-50 justify-content-center">
<img src="assets/img/iphone-x-frame.png" alt="" class="img-fluid">
</div>
<div class="banner-slides-right d-flex w-50 justify-content-center">
</div>
</div>
<div class="banner-slides d-flex align-items-center">
<div class="banner-slides-left d-flex w-50 justify-content-center">
</div>
<div class="banner-slides-right d-flex w-50 justify-content-center">
<img src="assets/img/iphone-x-frame.png" alt="" class="img-fluid">
</div>
</div>
</div>
<main class="site-content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil incidunt sapiente cumque? Obcaecati, maxime consequuntur illum quia a necessitatibus mollitia rerum harum neque impedit nostrum tenetur ad perferendis. Dolores rerum repellendus excepturi omnis ex deserunt quidem saepe, assumenda doloribus recusandae minima labore molestiae in beatae adipisci! Praesentium laborum beatae fuga.
</main>
Here's the JS:
$(document).ready(function () {
var $slider = $(".banner-full-slider");
$slider.
on('init', function () {
mouseWheel($slider);
}).
slick({
dots: false,
infinite: false,
fade: true,
cssEase: 'linear',
arrows: false,
});
function mouseWheel($slider) {
$(window).on('wheel', {
$slider: $slider
}, mouseWheelHandler);
}
function mouseWheelHandler(event) {
event.preventDefault();
var $slider = event.data.$slider;
var delta = event.originalEvent.deltaY;
if (delta > 0) {
$slider.slick('slickPrev');
} else {
$slider.slick('slickNext');
}
}
});
javascript html slider
javascript html slider
edited Nov 24 '18 at 17:02
Gal Margalit
2,74823143
asked Nov 24 '18 at 13:20
Sayantan ChandraSayantan Chandra
298
edited Nov 24 '18 at 17:02
Gal Margalit
2,74823143
asked Nov 24 '18 at 13:20
Sayantan ChandraSayantan Chandra
298
edited Nov 24 '18 at 17:02
Gal Margalit
2,74823143
edited Nov 24 '18 at 17:02
Gal Margalit
2,74823143
edited Nov 24 '18 at 17:02
Gal Margalit
2,74823143
2,74823143
asked Nov 24 '18 at 13:20
Sayantan ChandraSayantan Chandra
298
asked Nov 24 '18 at 13:20
Sayantan ChandraSayantan Chandra
298
asked Nov 24 '18 at 13:20
Sayantan ChandraSayantan Chandra
298
298
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53458565%2fhow-to-get-out-from-slick-slider-and-go-to-the-next-section%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53458565%2fhow-to-get-out-from-slick-slider-and-go-to-the-next-section%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
