I have created slider which appears on top of html page but i need it to appear at the bottom and also the horizontal slide bar
should be reduced to half of its size and also I want to limit the value from (0-100) to (min:1-max:25)
I am new to the css and I don't know how to do this can someone help me please.I have also uploaded the complete code.
$(function() {
var handle = $("#custom-handle");
$("#slider").slider({
create: function() {
handle.text($(this).slider("value"));
},
slide: function(event, ui) {
handle.text(ui.value);
}
});
});
#custom-handle {
width: 3em;
height: 1.6em;
top: 50%;
margin-top: -.8em;
text-align: center;
line-height: 1.6em;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="slider">
<div id="custom-handle" class="ui-slider-handle"></div>
</div>
To set the minimum and maximum for the slider you would do this:
$(function() {
var handle = $("#custom-handle");
$("#slider").slider({
min: 1, //<--------Min
max: 25, //<-------Max
create: function() {
handle.text($(this).slider("value"));
},
slide: function(event, ui) {
handle.text(ui.value);
}
});
});
for the CSS, you could position it like this:
#slider {
width:50%; /*make it half its width*/
position:absolute; /*allow you to position it at the bottom*/
bottom:20px; /*how far from the bottom*/
left:20px; /* how far from the left*/
}
Demo: https://jsfiddle.net/3t0s597v/
Here you go, everything you need!
$(function() {
var handle = $("#custom-handle");
$("#slider").slider({
min: 1,
max: 25,
create: function() {
handle.text($(this).slider("value"))
},
slide: function(event, ui) {
handle.text(ui.value);
}
});
});
#custom-handle {
width: 3em;
height: 1.6em;
top: 50%;
margin-top: -.8em;
text-align: center;
line-height: 1.6em;
}
#slider {
width: 50%;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="slider">
<div id="custom-handle" class="ui-slider-handle"></div>
</div>
Related
https://jsfiddle.net/09rcqwdf/1/
The sidebar has a higher z-index. The container .main has overflow: none, the div inside it has overflow: scroll but for some reason when you drag the text it thinks its over the .scrolling div when in fact its over the sidebar div.
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#fafafa">
<style>
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#content {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.main {
position: absolute;
bottom: 0;
left: 300px;
right: 0;
top: 0;
overflow: hidden;
}
.scroll-container {
display: block;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
overflow: scroll;
z-index: 1;
}
.scrolling {
display: block;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 3500px;
height: 4000px
}
.sidebar {
display: block;
position: absolute;
background-color: #5555;
overflow: hidden;
z-index: 100000;
width: 300px;
bottom: 0;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="content">
<div class="main">
<div class="scroll-container">
<div class="scrolling">
</div>
</div>
</div>
<div class="sidebar">
<div>
<div class="drag">Drag</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')
</script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$('.scrolling').droppable({
tolerance: 'pointer',
accept: '.drag',
drop(event, ui) {
console.log(event);
console.log(ui);
if (ui.helper.hasClass('cancelled')) {
return;
}
},
});
$('.drag').draggable({
helper() {
const $helper = $('<div></div>');
$helper.text('drag');
return $helper.clone().addClass('dragged-component-helper');
},
start() {},
stop(event, ui) {
ui.helper[0].remove();
},
cursorAt: {
left: 0,
top: 5,
},
cancelOnEscape: true,
appendTo: '#content',
disabled: false,
distance: 0,
revert: 'invalid',
});
</script>
</body>
</html>
First thing I noticed is your helper callback was configured incorrectly, you had:
$('.drag').draggable({
helper() {
const $helper = $('<div></div>');
$helper.text('drag');
return $helper.clone().addClass('dragged-component-helper');
},
start() {
},
Since you're defining an Object, you need to have the keyname, a colon, and then the function. Example:
$('.drag').draggable({
helper: function() {
const $helper = $('<div></div>');
$helper.text('drag');
return $helper.clone().addClass('dragged-component-helper');
},
start: () => {
},
This may have been causing various initialization issues for your draggable and I am surprised it did not appear as an error in your console.
In regards to the drag action, I think this will also be cleared up by the correction.
https://jsfiddle.net/Twisty/3gn57quj/10/
JavaScript
$(function() {
$('.scrolling').droppable({
tolerance: 'pointer',
accept: '.drag',
drop(event, ui) {
if (ui.helper.hasClass('cancelled')) {
return false;
}
$(this).append(ui.helper.clone().css({
left: (ui.offset.left - $(".sidebar").width()) + "px",
top: ui.offset.top + "px"
}));
},
});
$('.drag').draggable({
helper: function() {
return $("<div>", {
class: "drag component"
}).html("drag");
},
stop(event, ui) {
ui.helper[0].remove();
},
cursorAt: {
left: 0,
top: 5,
},
cancelOnEscape: true,
appendTo: '#content',
disabled: false,
distance: 0,
revert: 'invalid',
});
});
Regarding the z-index issue, I believe You can either
set in Your CSS:
.scrolling {
background-color: transparent;
}
and use the background-color of the scroll-container
or simply raise a little bit the z-index of the draggable
(preferred solution):
.drag {
z-index: 10;
}
or maybe set the inline style in Your helper function:
return $('<div style="z-index: 10;">', {
Finally, I believe You don't even need to raise so much the z-index of the sidebar, You can quietly avoid that
z-index: 100000
I strongly believe You may need also to change: ui.helper[0].remove(); to: ui.helper.remove();
As a bonus, to correctly position the draggable I believe the simplest solution will be to get the scroll position of the closest scrollable container:
$(function() {
$('.scrolling').droppable({
tolerance: 'pointer',
accept: '.drag',
drop: function(event, ui) {
if (ui.helper.hasClass('cancelled')) {
return false;
}
var container = $(event.target).scrollParent();
$(this).append(ui.helper.clone().css({
left: (ui.offset.left + container.scrollLeft()- $(".sidebar").width()) + "px",
top: (ui.offset.top + container.scrollTop()) + "px"
}));
}
});
$('.drag').draggable({
helper: function() {
return $("<div>", {
class: "drag component"
}).html("drag");
},
stop: function(event, ui) {
ui.helper.remove();
},
cursorAt: {left: 0, top: 5},
cancelOnEscape: true,
appendTo: '#content',
disabled: false,
distance: 0,
revert: 'invalid'
});
});
Moreover, please note: Twisty's remark is correct, in latest Firefox and Chrome Your snippet works, but a brief test in some other browsers raises below error:
Expected: ':'
It does not think it’s over the .scrolling div. It it just that the .scrolling div is transparent and you can see “through” it. To see what I am saying, add a background color to your .scrolling div, which will prevent you to see what is happening behind it.
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#fafafa">
<style>
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#content {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.main {
position: absolute;
bottom: 0;
left: 300px;
right: 0;
top: 0;
overflow: hidden;
}
.scroll-container {
display: block;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
overflow: scroll;
z-index: 1;
}
.scrolling {
display: block;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 3500px;
height: 4000px;
background: orange; <!-- Background Color to prevent transparency -->
}
.sidebar {
display: block;
position: absolute;
background-color: #5555;
overflow: hidden;
z-index: 100000;
width: 300px;
bottom: 0;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="content">
<div class="main">
<div class="scroll-container">
<div class="scrolling">
</div>
</div>
</div>
<div class="sidebar">
<div>
<div class="drag">Drag</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')
</script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$('.scrolling').droppable({
tolerance: 'pointer',
accept: '.drag',
drop(event, ui) {
console.log(event);
console.log(ui);
if (ui.helper.hasClass('cancelled')) {
return;
}
},
});
$('.drag').draggable({
helper() {
const $helper = $('<div></div>');
$helper.text('drag');
return $helper.clone().addClass('dragged-component-helper');
},
start() {},
stop(event, ui) {
ui.helper[0].remove();
},
cursorAt: {
left: 0,
top: 5,
},
cancelOnEscape: true,
appendTo: '#content',
disabled: false,
distance: 0,
revert: 'invalid',
});
</script>
</body>
</html>
I suppose you want to restrict the dragging between the sidebar only.
For that you need to provide option for containment in draggable function. Which will block the movement of drag.
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#fafafa">
<style>
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#content {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.main {
position: absolute;
bottom: 0;
left: 300px;
right: 0;
top: 0;
overflow: hidden;
}
.scroll-container {
display: block;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
overflow: scroll;
z-index: 1;
}
.scrolling {
display: block;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 3500px;
height: 4000px
}
.sidebar {
display: block;
position: absolute;
background-color: #5555;
overflow: hidden;
z-index: 100000;
width: 300px;
bottom: 0;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="content">
<div class="main">
<div class="scroll-container">
<div class="scrolling">
</div>
</div>
</div>
<div class="sidebar">
<div>
<div class="drag">Drag</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')
</script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$('.scrolling').droppable({
tolerance: 'pointer',
accept: '.drag',
drop(event, ui) {
console.log(event);
console.log(ui);
if (ui.helper.hasClass('cancelled')) {
return;
}
},
});
$('.drag').draggable({
containment: ".sidebar",
helper() {
const $helper = $('<div></div>');
$helper.text('drag');
return $helper.clone().addClass('dragged-component-helper');
},
start() {},
stop(event, ui) {
ui.helper[0].remove();
},
cursorAt: {
left: 0,
top: 5,
},
cancelOnEscape: true,
appendTo: '#content',
disabled: false,
distance: 0,
revert: 'invalid',
});
</script>
</body>
</html>
I am trying to increase the width of an element (.inner) using jQuery Ui slider. This is somehow working fine but I need to keep the center of the inner always in the center of .wrapper. so I think I need to add negative values for top and left but I do not know how to achieve them. Do I have to create two custom counter there or is there any better way to achieve this?
$(function() {
$("#slider").slider({
range: "max",
min: 300,
max: 1000,
value: 1,
slide: function(event, ui) {
$(".inner").css({
"width": ui.value,
"height": ui.value
});
}
});
});
body,
html {
height: 100%;
width: 100%
}
.wrapper {
position: relative;
height: 300px;
width: 300px;
border: 2px solid #999;
border-radius: 4px;
overflow:hidden;
}
.inner {
position: absolute;
width: 100%;
height: 100%;
display: -webkit-flex;
-webkit-align-items: center;
display: flex;
align-items: center;
justify-content: center;
background: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="wrapper ">
<div class="inner"> Center </div>
</div>
<br />
<div id="slider"></div>
Since the width of the div and the range of the slider were the same, I used the slider value to change the left and top positions of the inner div.
This was of course possible because it was in position absolute.
Only half the value of the slider is applied, because to be centered you should split the change on left/right and top/bottom. Obviously adding the right or bottom css property would be pointless, since one is enough to properly position your element.
$(function() {
var $inner = $(".inner");
var lastValue = 300;
$("#slider").slider({
range: "max",
min: 300,
max: 1000,
value: 300,
slide: function(event, ui) {
var curLeft = $inner.position().left;
var curTop = $inner.position().top;
var toAdd = (lastValue - ui.value) /2;
$inner.css({
"width": ui.value,
"height": ui.value,
"top": curTop + toAdd,
"left": curLeft + toAdd,
});
lastValue = ui.value;
}
});
});
body,
html {
height: 100%;
width: 100%
}
.wrapper {
position: relative;
height: 300px;
width: 300px;
border: 2px solid #999;
border-radius: 4px;
overflow:hidden;
}
.inner {
position: absolute;
width: 100%;
height: 100%;
display: -webkit-flex;
-webkit-align-items: center;
display: flex;
align-items: center;
justify-content: center;
background: #eee;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="wrapper ">
<div class="inner"> Center </div>
</div>
<br />
<div id="slider"></div>
On my page I'm using the Jquery UI extension to sort divs. The divs are arranged in 2 columns. I created a JS Bin, please take a look on it.
When you drag all 3 divs to the left side, you can't get them on the right side again. Where is the mistake?
$(document).ready(function() {
var $grid = $('.grid').packery({
itemSelector: '.gridItem',
gutter: '.gridGutter',
percentPosition: true
});
var $items = $grid.find('.gridItem').draggable();
$grid.packery('bindUIDraggableEvents', $items);
});
* {
margin: 0px;
padding: 0px;
font-family: 'Francois One', sans-serif;
font-size: 16px;
text-decoration: none;
}
.grid {
width: 1000px;
background-color: aqua;
}
.gridItem {
width: 49%;
background-color: coral;
}
.gridGutter {
width: 2%;
}
#media screen and (max-width: 1000px) {
.grid {
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://unpkg.com/packery#2.1.1/dist/packery.pkgd.min.js"></script>
<div class="grid">
<div class="gridGutter"></div>
<div class="gridItem">div 1</div>
<div class="gridItem">div 2</div>
<div class="gridItem">div 3</div>
</div>
The Packery documentation says the following:
Without columnWidth set, dragged items can only be dropped in place of other items.
You can set a selector for the columnWidth so it takes that element's width as the column's width.
$(document).ready(function() {
var $grid = $('.grid').packery({
itemSelector: '.gridItem',
gutter: '.gridGutter',
percentPosition: true,
columnWidth: '.gridSizer'
});
var $items = $grid.find('.gridItem').draggable();
$grid.packery('bindUIDraggableEvents', $items);
});
* {
margin: 0px;
padding: 0px;
font-family: 'Francois One', sans-serif;
font-size: 16px;
text-decoration: none;
}
.grid {
width: 1000px;
background-color: aqua;
}
.gridSizer,
.gridItem {
width: 49%;
}
.gridItem {
background-color: coral;
}
.gridGutter {
width: 2%;
}
#media screen and (max-width: 1000px) {
.grid {
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://unpkg.com/packery#2.1.1/dist/packery.pkgd.min.js"></script>
<div class="grid">
<div class="gridSizer"></div>
<div class="gridGutter"></div>
<div class="gridItem">div 1</div>
<div class="gridItem">div 2</div>
<div class="gridItem">div 3</div>
</div>
If you add a columnWidth: 390 as show below it should work.
$(document).ready(function(){
var $grid = $('.grid').packery({
itemSelector: '.gridItem',
gutter: '.gridGutter',
columnWidth: 390,
percentPosition: true
});
var $items = $grid.find('.gridItem').draggable();
$grid.packery( 'bindUIDraggableEvents', $items );
});
I suspect that when you move all div to the left it sees it as only one column.
Hope this helps.
I have a large jQuery UI droppable that is overlaid by some other elements. When I hover a draggable over the elements that actually obscure the droppable, the droppable still receives the ui-state-hover class. How can we avoid that?
It seems there is no chance to implement the accept function of the droppable s.t. it decides by the cursor coordinates, at least I can't get it to work: If it returns false once, it won't be queried again until the cursor re-enters the obscured droppable.
Not sure there is a native way of doing it. But you can make the overlay elements droppable as well and on over and out disable and enable the 'real' droppable. Like this for example:
$('#droppable').droppable({
accept: '#draggable:not(.overObscure)',
greedy: true,
overlay: 'ha',
drop: function (e, ui) {
console.log(this)
}
});
$('#overlay').droppable({
accept: '#draggable',
over: function (e, ui) {
ui.draggable.addClass('overObscure');
},
out: function (e, ui) {
ui.draggable.removeClass('overObscure');
}
});
$('#draggable').draggable();
#droppable {
width: 300px;
height: 300px;
background-color: #ddd;
}
#overlay {
width: 100px;
height: 100px;
position: absolute;
top: 0px;
left: 0px;
background-color: blue;
}
#draggable {
width: 25px;
height: 25px;
background-color: yellow;
}
<script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div id="droppable"></div>
<div id="overlay"></div>
<div id="draggable"></div>
You could also add the behavior to droppable so it's easier to call. Like this for example:
$.widget("ui.droppable", $.ui.droppable, {
_create: function () {
var that = this;
this._super();
$(this.options.overlay).droppable({
accept: this.options.accept,
over: function (e, ui) {
that.options.disabled = true;
},
out: function (e, ui) {
that.options.disabled = false;
}
});
}
})
$('#droppable').droppable({
accept: '#draggable',
greedy: true,
overlay: '#overlay',
drop: function (e, ui) {
console.log('dropped')
}
});
$('#draggable').draggable();
#droppable {
width: 300px;
height: 300px;
background-color: #ddd;
}
#overlay {
width: 100px;
height: 100px;
position: absolute;
top: 0px;
left: 0px;
background-color: blue;
}
#draggable {
width: 25px;
height: 25px;
background-color: yellow;
}
<script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div id="droppable"></div>
<div id="overlay"></div>
<div id="draggable"></div>
I can't figure out how to stop and resume the slide on a mouseover or hover occurrence. I basically want to stop all the scripts when .mouseover or .hover is triggered. Can anyone help me on this?
Edit: Code should work if you simply copy paste it, it is all hosted externally
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/jvojroo/DIamwjvp3/jquery.caroufredsel-6.2.0-packed.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#slider').carouFredSel({
width: '100%',
align: false,
items: 4,
items: {
width: $('#wrapper').width() * 0.15,
height: 500,
visible: 1,
minimum: 1
},
scroll: {
items: 1,
timeoutDuration: 1000,
onBefore: function(data) {
// find current and next slide
var currentSlide = $('.slide.active', this),
nextSlide = data.items.visible,
_width = $('#wrapper').width();
// resize currentslide to small version
currentSlide.stop().animate({
width: _width * 0.15
});
currentSlide.removeClass('active');
// hide current block
data.items.old.add(data.items.visible).find('.slide-block').stop().fadeOut();
// animate clicked slide to large size
nextSlide.addClass('active');
nextSlide.stop().animate({
width: _width * 0.7
});
},
onAfter: function(data) {
// show active slide block
data.items.visible.last().find('.slide-block').stop().fadeIn();
}
},
onCreate: function(data) {
// clone images for better sliding and insert them dynamacly in slider
var newitems = $('.slide', this).clone(true),
_width = $('#wrapper').width();
$(this).trigger('insertItem', [newitems, newitems.length, false]);
// show images
$('.slide', this).fadeIn();
$('.slide:first-child', this).addClass('active');
$('.slide', this).width(_width * 0.15);
// enlarge first slide
$('.slide:first-child', this).animate({
width: _width * 0.7
});
// show first title block and hide the rest
$(this).find('.slide-block').hide();
$(this).find('.slide.active .slide-block').stop().fadeIn();
}
});
// Handle click events
$('#slider').children().click(function() {
$('#slider').trigger('slideTo', [this]);
});
$('.slide:firstchild').mouseover(function() {
$('.slide:firstchild').stop();
});
$('#slider').children().mouseover(function() {
$('#slider').stop();
});
//$('#slider').children().mouseout(function() {
// $('#slider').trigger( 'slideTo', [this] );
//});
// Enable code below if you want to support browser resizing
$(window).resize(function() {
var slider = $('#slider'),
_width = $('#wrapper').width();
// show images
slider.find('.slide').width(_width * 0.15);
// enlarge first slide
slider.find('.slide.active').width(_width * 0.7);
// update item width config
slider.trigger('configuration', ['items.width', _width * 0.15]);
});
});
</script>
<style type="text/css">
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
background: #f9f9f3;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #222;
line-height: 20px;
}
#wrapper {
height: 100%;
width: 100%;
min-height: 650px;
min-width: 900px;
padding-top: 1px;
}
#slider {
margin: 100px 0 0 0;
height: 500px;
overflow: hidden;
}
#slider .slide {
position: relative;
display: none;
height: 500px;
float: left;
background-position: center right;
cursor: pointer;
border-left: 1px solid #fff;
}
#slider .slide:first-child {
border: none;
}
#slider .slide.active {
cursor: default;
}
#slider .slide-block {
position: absolute;
left: 40px;
bottom: 75px;
display: inline-block;
width: 435px;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
font-size: 14px;
color: #134B94;
border: 1px solid #fff;
overflow: hidden;
border-radius: 4px;
}
#slider .slide-block h4 {
font-size: 36px;
font-weight: bold;
margin: 0 0 10px 0;
line-height: 1;
}
#slider .slide-block p {
margin: 0;
}
#donate-spacer {
height: 0;
}
#donate {
border-top: 1px solid #999;
width: 750px;
padding: 50px 75px;
margin: 0 auto;
overflow: hidden;
}
#donate p, #donate form {
margin: 0;
float: left;
}
#donate p {
width: 650px;
color: #999;
}
#donate form {
width: 100px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="slider">
<div class="slide">
<img src="http://farm4.staticflickr.com/3821/10956569263_92a647e267_o.png">
<div class="slide-block">
<h4>Ice Age</h4>
<p>Heading south to avoid a bad case of global frostbite, a group of migrating misfit creatures embark on a hilarious quest to reunite a human baby with his tribe.</p>
</div>
</div>
<div class="slide">
<img src="http://farm8.staticflickr.com/7444/10956575693_94fd773731_o.png">
<div class="slide-block">
<h4>For The Birds</h4>
<p>For the Birds is an animated short film, produced by Pixar Animation Studios released in 2000. It is shown in a theatrical release of the 2001 Pixar feature film Monsters, Inc.</p>
</div>
</div>
<div class="slide">
<img src="http://farm4.staticflickr.com/3789/10956504824_4845433ff6_o.png">
<div class="slide-block">
<h4>UP</h4>
<p>A comedy adventure in which 78-year-old Carl Fredricksen fulfills his dream of a great adventure when he ties thousands of balloons to his house and flies away to the wilds of South America.</p>
</div>
</div>
<div class="slide">
<img src="http://farm6.staticflickr.com/5464/9449526762_ed5339251e_o.jpg">
<div class="slide-block">
<h4>Ice Age</h4>
<p>Heading south to avoid a bad case of global frostbite, a group of migrating misfit creatures embark on a hilarious quest to reunite a human baby with his tribe.</p>
</div>
</div>
</div>
</div>
</body>
</html>
You can trigger a custom event named "stop" on carouFredSel component If you want to stop the slider.
$('#slider').trigger("stop");
And trigger a custom event named "play" with a extra parameter true to resume the slider
$("#slider").trigger("play",true);
For example:
<script>
$(function(){
$("#slider").carouFredSel({
items: 4
});
$("#slider > div.slide").hover(
function(){
$("#slider").trigger("stop");
},
function(){
$("#slider").trigger("play",true);
}
);
});
</script>
Hope this is helpful for you.