We Keep Coding

Vertical scrollable Slider inside a container

I am looking to develop a page where i can have a vertical slide show (cointaining images and text) which changes on scrolling down and once the last slide is reached, parent page starts to scroll. You can see the example on the following page
https://www.mi.com/in/redmi-note5/
I tried with various examples, but all of them are for full page examples. So here I would like to have the vertical slides inside a section on the page.
Hope someone can help me out here.
I am trying to use FSVS code.
You can check the attempted code here
Trial page

you can use slick slider.check the demos you'll get your answer.
http://kenwheeler.github.io/slick/
you can use wheel event and make sure you set infinite: false in slick options.
var $sliderElm = $('.slider');
$sliderElm.on('wheel', function(event) {
event.preventDefault();
if (event.originalEvent.deltaY < 0) {
$(this).slick('slickPrev');
} else {
$(this).slick('slickNext');
}
});

Prevent Slider Revolution from pausing HTML5 video

I'm using the Themepunch Revolution slider in a project, which shows a single video slide in HTML 5.
When I click on it, it pauses, which I don't want.
The <video> element in the page is generated by the slider plugin.
Here's what I tried so far:
$('body').on('click', 'video', function(e) {
e.preventDefault();
e.stopPropagation();
return false;
});
This is the code in the slider library:
html5vid.find('video, .tp-poster, .tp-video-play-button').click(function() {
if (html5vid.hasClass("videoisplaying"))
video.pause();
else
video.play();
})
I also tried catching the pause event, but it never fires:
$('body').on('pause', 'video', ...);

For Revolution Slider 6.x, it's easier, just select the video layer option > Content > (Scroll down) Advanced Media Settings > Set "No Interaction" off
This will disable the click to pause/play also remove controls, you end up with a playing video with no interactions, also don't forget to set Loop Media on for complete experience
Revolution Slider No Interaction Setting to prevent controls and stop click for play/pause:

Hey it is 2019 but anyone who look for solution is that :
Put transparent shape layer onto video layer as full width and height.
Make sure put this layer one step above the video layer as showing below(this shape looks like it below the video layer but in rev slider animation settings the more bottom the more up on the front-end i hope i make it clear :)
Layer positions on rev slider animation settings

Try
html5vid.find('video, .tp-poster, .tp-video-play-button').unbind('click');
Replace html5vid with whatever element the script is looking to find in.
EDITED
...or better yet, try to unbind click on the video element as follows:
$('video').unbind( "click" );

How to turn Bootstrap Carousel slides to change on scroll?

I am using bootstrap carousel in my website. But I want its functionality little different. I want slides to change on mouseScroll (each slide on each time mouse scrolled).
How can I achieve it with Bootstrap Carousel?
$('#myCarousel').carousel({
interval: 3000
});
jsfiddle

$('#myCarousel').carousel('next') slides to next item as documented.
So you can bind scroll event to do that:
$('#myCarousel').bind('mousewheel', function() {
$(this).carousel('next');
});
Edit: you can get mouse wheel events and make carousel move to next or previous slide:
$('#myCarousel').bind('mousewheel', function(e) {
if(e.originalEvent.wheelDelta /120 > 0) {
$(this).carousel('next');
} else {
$(this).carousel('prev');
}
});
updated your jsfiddle
You can also bind it to all carousels instead of a specific single one by using a class selector: Use $('.carousel').bind(...) for that. If your requirement is to have all your carousels support the mouse wheel, not just a specific single one, the class selector is more convenient.

Center/Crop Images - Responsive Slideshow using Cycle2 plugin

I'm working on a solution to crop and center images in a cycle2 slideshow.
I'm resizing and centering the image in the slideshow to the parent using this plugin.
Problem I'm having is that I'm centring the image after it transitions, but this causes each slide to 'jump' into place. I can't seem to find a way to center all images on slide init, and resize.
function cropSlideImage() {
$('.cycle-slideshow img').resizeToParent({parent: '.slide'});
}
$( document ).ready(function() {
cropSlideImage();
$( '.cycle-slideshow' ).on( 'cycle-update-view', function( event, optionHash, slideOptionsHash, currentSlideEl ) {
cropSlideImage();
});
});
http://jsfiddle.net/mwHk4/1/

The resizeToParent plugin will not work if the image parents are set to display:none. Because the resizeToParent plugin waits for images to be cached it will not run until after most of the slides are already set to display:none.
Initiate the slideshow programmatically using $('.slideshow').cycle() after running resizeToParent and everything seems to work as desired.
function cropSlideImage() {
$('.slideshow img').resizeToParent();
}
$(document).ready(function() {
cropSlideImage();
$('.slideshow').cycle();
});
Fiddle!

How to make a sliding thingamajig between photos?

See the effect in the photos in the article here:
http://www.popsci.com/science/article/2012-11/and-after-images-show-hurricane-sandys-devastation
Does anyone have any idea how that's done? I suppose I could make two frames with adjustable width within a fixed frame, but what about the handle? And the way the frame line and handle brighten and enlarge when you mouse over? Hover event, to be sure, but what kind of hover event?

It is very simple. You have 2 DIVs with the 2 different images (as background-image in css) overlapping eachother (In e.g absolute positioning.) (Perhaps the "Before" picture above)
Then you have a slider and when dragged it decreases the overlapping DIV's width, making the underlaying DIV show!
This functionallity can be found in a jQuery plugin called "Before/After"
Link: jQuery BEFORE / AFTER

You could of course just write your own that isn't dependant on jQuery UI.
;(function($){
$.fn.slidingThingamajig = function () {
return this.each(function(){
var $this = $(this);
$this.find('.handle')
.css({cursor:'ew-resize'}) // Here's your fancy cursor with directional arrows
.on('mousedown', function(e) {
$this.addClass('resizable');
$this.parents().on('mousemove', function (e) {
$('.resizable').css({width:e.pageX - $('.resizable').offset().left});
}).on('mouseup', function(e) {
$('.resizable').removeClass('resizable');
});
e.preventDefault();
});
});
}
})(jQuery);
You would probably need to tweak this a little, but it's mostly all there.