my last slide is not full-height, it has a small fixed height.
it is causing that activeIndexChange() to not be fired ONLY for this slide.
I need to catch event when this slide is being displayed.
here is my code:
<ion-slides #slides [options]="slides_options">
<ion-slide class="full_height">my slide</ion-slide>
<ion-slide class="full_height">my slide</ion-slide>
<ion-slide class="full_height">my slide</ion-slide>
<ion-slide class="mid_height">my slide</ion-slide>
</ion-slides>
ion-slides{
width:100%;
height:100vh;
ion-slide{
width:100%;
&.full_height{ height:100vh; }
&.mid_height{ height:300px; }
}
}
slides_options = {
slidesPerView :'auto',
speed :400,
loop :false,
spaceBetween :0,
zoom :false,
grabCursor :false,
direction :'vertical',
centeredSlides :false,
on:{
beforeInit(){
console.log('beforeInit');
},
activeIndexChange(){
console.log('activeIndexChange');
},
}
};
am I doing something wrong?
Related
I am using slick-slider
in my Angular-6 project using jQuery. I want to change the width of the slide on click of that slide.
Here is my HTML:
<div class="slide-container">
<div class="slide" (click)="changeWidth()"></div>
<div class="slide" (click)="changeWidth()"></div>
<div class="slide" (click)="changeWidth()"></div>
<div class="slide" (click)="changeWidth()"></div>
<div class="slide" (click)="changeWidth()"></div>
</div>
Here is my typescript code:
ngAfterViewInit() {
$('.slide-container').slick({
centerMode: true,
centerPadding: '25%',
slidesToShow: 1,
accessibility: true,
cssEase: 'ease-in-out',
focusOnSelect: true,
infinite: false,
speed: 350,
});
}
changeWidth() {
// currentWidth is a global variable assigned to '25%'
if (currentWidth === '25%') {
$('.slide-container').slick('slickSetOption', 'centerPadding', '2%');
} else {
$('.slide-container').slick('slickSetOption', 'centerPadding', '25%');
}
}
Here is my CSS:
.slide {
transition: width 0.35s ease-in-out;
}
It works pretty well but the problem is when it increases the width slides move towards left first and then start its CSS transition. Also, when it decreases the width it moves slides towards the right and then starts the CSS transition.
At the time of increasing width, I want it to increase the width from the center of the slide and at the time of decreasing it should end up decreasing in center of slide only.
It is also okay to change CSS properties of Slick-classes. I tried to change according to my need but it is not working as my expectation.
How can I accomplish this scenario?
Thanks.
I have a problem, when i reload my page, page starting at left, but I need this at center. How should i do this?
Next, when it will be in center, it should scroll to left until it 20px and so at right. Top and bottom doesnt matter.
2.JPG resolution is 2743 width, 768 height.
here is my code:
css:
* {
margin-left:-90px;
margin-top:-10px;
padding:-60px;
}
body {
background:white;
}
.bg {
background:url("2.JPG");
background-repeat:no-repeat;
height:768px;
width:2743px;
display:block;
}
connected^jquery 1-7 min js
javascript
$(document).ready(function(){
$(this).bind('mousemove',function(e){
$("#bg").css({ "margin-top":e.pageY/100, "margin-left":e.pageX/6 });
});
setTimeout(function() {
$('#top').cycle({
delay: -1500
});
$('.pics img').css({
opacity: 0.5
});
}, 0);
setTimeout(function(){
$('#bottom').cycle({
delay: -3000
});
$('.pics img').css({
opacity: 0.5
});
}, 0);
});
this is my html:
<div class="bg" id="bg"> </div>
Thank you very much and sorry for my English and my design knowledge :)
You can easily do it by onmousemove event of javascript
or you can try this for your problem i hope it will work
http://css-tricks.com/auto-moving-parallax-background/
I'm trying to made a slideshow that slides left between images. I can get the first image to slide left, but the next image won't show up.
<script>
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function() {
$('.fadein :first-child').hide("slide", {direction: "left"}, 400)
.next('img')
.show("slide", {direction: "left"}, 400 ).end()
.appendTo('.fadein');
}, 7000);
});
</script>
HTML:
<div class="fadein">
<img style="width:600px; height:360px" src="images/fourthslide.jpg">
<img style="width:600px; height:360px" src="images/secondslide.jpg">
<img style="width:600px; height:360px" src="images/thirdslide.jpg">
<img style="width:600px; height:360px" src="images/firstslide.jpg">
</div>
CSS:
.fadein {
position:relative;
width:100%;
height:430px;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
}
.fadein img {
position:absolute;
vertical-align: middle;
top:10px;
left:0px;
border-top:1px solid navy;
}
It appears that this is an issue with the jQuery UI. The .show() method does not work as expected with the slide effect if your target element is inline. To demonstrate, I've put together a JSFiddle:
Using slide: http://jsfiddle.net/VLqjf/78/
Using swing: http://jsfiddle.net/VLqjf/79/
You will notice that if the effect is set to swing, the slideshow works as expected (case 2). However, when it is set to slide something gets messed up (case 1).
The problem is that the jQuery slide effect wraps your element in a *div.ui_effects_wrapper* that is styled position:relative. This breaks the line of images. The basic solution seems to be that you must not position your images inline.
The work-around I tested was to force the *div.ui_effects_wrapper* to be inline, using .ui-effects-wrapper{display: inline-block !important;}. Additionally, I animate the width of this div to zero as while it's being slid to the left - this effectively pushes it out of the way so the next img can slide in place. The work-around is in this JSFiddle: http://jsfiddle.net/VLqjf/105/.
I have an icon on my page which after a 500ms delay pops up a connecting box with further details.
http://jsfiddle.net/qSe6t/1/f
Then when you mouseout from both the icon and the popup, after a 500ms delay the popup is hidden.
The trouble I am having is trying to prevent the hide from happening is the cursor re-enters the icon/popup during that 500ms delay.
Here's the code...
<div id="accountIcon">
<div id="accountPopup"></div>
</div>
CSS:
#accountIcon {
position:relative;
height:58px;
width:80px;
cursor:pointer;
background-color:#000;
}
#accountPopup {
position:absolute;
top:58px;
width:400px;
height:200px;
background-color:#CCC;
display:none;
}
jQuery:
$("#accountIcon").hover(function () {
$("#accountPopup").delay(500).show(0);
}, function () {
$("#accountPopup").delay(500).hide(0);
});
you need jquery .stop(true, true) to stop all current timers / events on that element.
I forked your fiddle
http://jsfiddle.net/qSe6t/3/
$("#accountPopup").stop(true,true).delay(500).hide(0);
var timeout;
$("#accountIcon").hover(function () {
clearTimeout(timeout);
$("#accountPopup").delay(500).show(0);
}, function () {
timeout = setTimeout(function(){
$("#accountPopup").delay(500).hide(0);
},500);
});
Demo ---> http://jsfiddle.net/qSe6t/2/
I need to flip a div panel left once a some item div get clicked and hide,once item div get clicked again. (exactly like new twitter reading panel).
i have tried several methods but i couldn't animate it smooth.
recently i identified it not happen smoothly because of the bad what have i done.i increased width of outter div and decrese width.
are there any good suggestion or code snippet to work my need??
Here is the code that i have used for animate and gt show the more read div panel
$("#more-item").animate({"width": "toggle"}, { duration: 500,specialEasing: {width: 'linear', height: 'easeOutBounce'} });
Here is the scenario that i need to see.
1. clicked on item div
2. more read div panel animate and flip to left and show the
3. click again item div
4. more read div panel animate and flip right and hide
when we at third point if we again click another item div just load content of recent clicked div instead animate and hide the more read div
here is the screen shot what my need functioning on new twitter reading panel.
You can easily do this by adding a fixed positioned <div> to the right, wrap your items in a container and animate the panel and the container's margin accordingly.
The trick is to use the top, bottom and right css properties to position the reading panel.
Here's a demo: http://jsfiddle.net/wUGaY/1/
HTML:
<div class="panel"></div>
<div class="container">
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>
<div class="item">Four: This contains a bit longer text to test if wrapping is working correctly.</div>
<div class="item">Five</div>
<div class="item">Six</div>
<div class="item">Seven</div>
<div class="item">Eight</div>
<div class="item">Nine</div>
<div class="item">Ten</div>
</div>
CSS:
.panel {
position:fixed;
top:0px;
bottom:0px;
right:0px;
width:200px;
padding:20px;
border:1px solid #eee;
background-color:white;
}
.item {
border:1px solid #eee;
padding:20px;
}
.active {
background-color: #eee;
}
Javascript:
$(function(){
function showPanel() {
// Show the panel and animate it into view
$('.panel').stop().show().animate({
right: '0px'
});
// Animate the container's margin to make room
// for the reading panel
$('.container').stop().animate({
marginRight: '232px'
});
}
function hidePanel() {
// Move the panel off the screen and hide it when done
$('.panel').stop().animate({
right: '-232px'
}, function(){
$(this).hide();
});
// Animate the container's margin back to normal
$('.container').stop().animate({
marginRight: '0px'
});
}
// Hide the panel initially and set its position
$('.panel').hide().css('right','-232px');
// What happens when they click on inactive items?
$('.container').delegate('.item:not(.active)', 'click', function() {
var $this = $(this);
// Make the current item the only active item
$('.active').removeClass('active');
$this.addClass('active');
// Add some content to the reading panel
$('.panel').html($this.html());
// Show the reading panel
showPanel();
});
// What happens when they click on an active item?
$('.container').delegate('.active', 'click', function() {
// Make it inactive
$(this).removeClass('active');
// Hide the reading panel
hidePanel();
});
});