React slick stop going passed end

React slick stop going passed end - javascript

I'm using React slick and if I have a bunch of small boxes and I scroll by 3 by setting slidesToScroll it shoots passed the width of my container.
https://codepen.io/e-man/pen/jvJdjY
if you look at the right side when you keep clicking until you reached 10 you will see all the empty space on the right. I want it to stop so the last item is flush up against the right.
Anyway to stop this from over shooting the bounds.
class SliderApp extends React.Component {
render() {
const options = {
infinite: false,
arrows: true,
slidesToShow: 6,
slidesToScroll: 3,
speed: 300,
};
return (
<div className="container">
<Slider {...options}>
<div className='box'>
<div className="inner-box">1</div>
</div>
<div className='box'>
<div className="inner-box">2</div>
</div>
<div className='box'>
<div className="inner-box">3</div>
</div>
<div className='box'>
<div className="inner-box">4</div>
</div>
<div className='box'>
<div className="inner-box">5</div>
</div>
<div className='box'>
<div className="inner-box">6</div>
</div>
<div className='box'>
<div className="inner-box">7</div>
</div>
<div className='box'>
<div className="inner-box">8</div>
</div>
<div className='box'>
<div className="inner-box">9</div>
</div>
<div className='box'>
<div className="inner-box">10</div>
</div>
</Slider>
</div>
)
}
}

Seems like a bug that has already been resolved here. You are probably using an older version of react-slick. Try updating that package.
I tested with 0.28.1 and this behaviour (called edgefriction) works (now) as you want it to.

Related

Vue js how to animate component display from top to bottom

I have four components when you hover the mouse over the picture, a certain component is displayed, the problem is that my components are displayed ugly without animation, I want to do so that when I hover over the picture, my components are displayed in an animated way from top to bottom.
As you can see, I have four pictures, for example, when you hover over the first picture, the first component is displayed when you hover over the second, the second component, and so on.
<div class="EnjoyGirlsList">
<div #mouseover="mouseOver1" #mouseout="mouseout" class="EnjoyCard">
<div>
<img src="~#/assets/Images/HomePage/EnjoyGirlsList/Rectangle-1.png" alt="">
</div>
<div class="EnjoyCardContainer">
<div style="background: #74C8C5" class="EnjoyCardChildContainer">
<h3>Teens</h3>
</div>
</div>
</div>
<div #mouseover="mouseOver2" #mouseout="mouseout" class="EnjoyCard">
<div>
<img src="~#/assets/Images/HomePage/EnjoyGirlsList/Rectangle-2.png" alt="">
</div>
<div class="EnjoyCardContainer">
<div style="background: #76ED00" class="EnjoyCardChildContainer">
<h3>Minxes</h3>
</div>
</div>
</div>
<div #mouseover="mouseOver3" #mouseout="mouseout" class="EnjoyCard">
<div>
<img src="~#/assets/Images/HomePage/EnjoyGirlsList/Rectangle-3.png" alt="">
</div>
<div class="EnjoyCardContainer">
<div style="background: #FFE600" class="EnjoyCardChildContainer">
<h3>MILFS</h3>
</div>
</div>
</div>
<div #mouseover="mouseOver4" #mouseout="mouseout" class="EnjoyCard">
<div>
<img src="~#/assets/Images/HomePage/EnjoyGirlsList/Rectangle-4.png" alt="">
</div>
<div class="EnjoyCardContainer">
<div style="background: #CC003D" class="EnjoyCardChildContainer">
<h3>COURGARS</h3>
</div>
</div>
</div>
</div>
</div>
<div class="EnjoyGirlsHoverEffect">
<EnjoyBlue v-show="img1"/>
<EnjoyGreen v-show="img2"/>
<EnjoyYellow v-show="img3" />
<EnjoyRed v-show="img4" />
</div>
export default {
name: "HomePage",
components: {EnjoyRed, EnjoyYellow, EnjoyGreen, EnjoyBlue, Navbar, GirlsSectionList, FeaturedShows,},
data() {
return {
img1: false,
img2: false,
img3: false,
img4: false,
}
},
methods: {
mouseOver1: function(){
this.img1 = true
},
mouseOver2: function(){
this.img2 = true
},
mouseOver3: function(){
this.img3 = true
},
mouseOver4: function(){
this.img4 = true
},
mouseout: function() {
this.img1 = false;
this.img2 = false;
this.img3 = false;
this.img4 = false;
}
}
}

<div style="margin-top: 50px;">
<slide-y-up-transition>
<RedExperience v-show="img1" />
</slide-y-up-transition>
<slide-y-up-transition>
<OrangeExperience v-show="img2" />
</slide-y-up-transition>
<slide-y-up-transition>
<GreenExperience v-show="img4" />
</slide-y-up-transition>
<slide-y-up-transition>
<BlueExperience v-show="img3" />
</slide-y-up-transition>
</div>
import {SlideYUpTransition} from 'vue2-transitions'
components: {SlideYUpTransition},

Troubleshooting conflicting elements on a website

I am working on a website and there seems to be conflicting elements.
I started with a template that contains a lot of "borrowed" CSS and JS elements from different places, and now I am trying to add a Slick slideshow, and there are conflicts in either the JS or the CSS that prevent me from editing the Slick slider (parts of the slick-slider code were already present in the "Organic Farm" template).
Right now I have js/core.min.js, js/script.js and js/slick.js being loaded into the page, and then at the bottom of the index page:
<script type="text/javascript">
$(document).ready(function(){
$('.swiper-slide').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true,
});
});
</script>
The HTML portion is:
<section class="section">
<div class="swiper-container swiper-slider swiper-custom" data-height="35.10416666666667%" data-min-height="375px" data-index-bullet="false" data-slide-effect="swipe" data-autoplay="5000">
<div class="swiper-wrapper swiper-wrapper-custom">
<div class="swiper-slide" data-slide-bg="images/ergfer1.jpg">
<div class="swiper-slide-caption">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-md-9 col-lg-8 top">
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide" data-slide-bg="images/gdrger.jpg">
<div class="swiper-slide-caption">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-md-9 col-lg-8 top">
</div>
</div>
</div>
</div>
</div>
Is there a way to find out why my custom script is not active? The arrows are also not showing up. For anything HTML and CSS I use the Inspector of Firefox, but here I'm really stumped.

Two things to consider:
1) When using slick.js, it is customary to add it to the element which is the parent of a set of elements which are then converted into slides. For example:
<div id="slide-wrapper">
<div class="my-slide">...</div>
<div class="my-slide">...</div>
<div class="my-slide">...</div>
</div>
$('.slide-wrapper').slick({
...
});
In your case, that would mean adding Slick to swiper-wrapper:
$('.swiper-wrapper').slick({
...
});
2) More likely the problem is that you have a conflict with the setup of a different slide show library altogether, Swiper.js (https://swiperjs.com/api/), which uses classes like swiper-container, swiper-wrapper and swiper-slide. To implement that slideshow, you would have to include that library on your page and initialize the slideshow with something like:
var mySwiper = new Swiper('.swiper-container', {
speed: 400,
spaceBetween: 100
});

Open div panel inbetween two tweets?

I'm working on a UI that has Twitter feeds. I want to be able to open a panel in the middle of two tweets, pushing the tweet below downwards. This functionality can be seen in tweet clients like TweetBot. As each new tweet in the stream popped up it would push each one below it down as well. Tool bar would be the same for all tweets.
Here is what I have for the JS:
$(document).ready(function() {
hidden = true;
$("div#tweetcontainer").click(function() {
if (hidden == false) {
$("div#toolbar").slideUp('fast');
hidden = true;
} else {
$("div#toolbar").slideDown('fast');
hidden = false;
}
});
});
Here is the markup of the HTML:
<div id="wrapper">
<!------------- Indivdual Tweet -------------------------->
<div id="tweetcontainer">
<div id="avatarcontainer">
<div id="avatar"></div>
</div>
<div id="content">
<div id="tweetheader">
<div id="name">
<h1>John Drake</h1>
</div>
<div id="tweethandle">
<h2>#Drakejon</h2>
</div>
<div id="tweettime">10m</div>
</div>
<div>
<p>Exceptional Buys Ranger To Give Monitoring Shot In The Arm To Its 'DevOps' Platform http://tcrn.ch/11m3BrO by #sohear </p>
</div>
</div>
</div>
<!------------- Indivdual Tweet 2 -------------------------->
<div id="tweetcontainer">
<div id="avatarcontainer">
<div id="avatar"></div>
</div>
<div id="content">
<div id="tweetheader">
<div id="name">
<h1>John Drake</h1>
</div>
<div id="tweethandle">
<h2>#Drakejon</h2>
</div>
<div id="tweettime">10m</div>
</div>
<div>
<p>Exceptional Buys Ranger To Give Monitoring Shot In The Arm To Its 'DevOps' Platform http://tcrn.ch/11m3BrO by #sohear </p>
</div>
</div>
</div>
<!-------------Tool Bar -------------------------------->
<div id="toolbar">
<div class="toolset">reply</div>
<div class="toolset">Retweet</div>
<div class="toolset">Favorite</div>
<div class="toolset">Track</div>
<div class="toolset">Details</div>
</div>
</div>

Do
$toolbar = $(.toolbar).clone();
$(this).after($toolbar);
I guess you will have to do something like
$(.toolbar).addClass("hidden");
before you appending it to the div, and then do
if ($(.toolbar)).hasClass("hidden"){
...pulldown...
}
or something to keep it disappeared and make it pullDown after appending.

slideToggle different effect over different DIVs

When i click over the first DIV, the slideToggle effect is done correctly.
When i click over the 2nd one, it seems like it doesn't apply the effect and the content just appear suddenly.
The same occurs with the 3rd element and with any other one but the first.
What's going on?
(demo working here: http://jsfiddle.net/SW5sc/6/ )
I have this HTML structure:
<div class="subcategory">Option 1 </div>
<div class="subcategoryContent">
<div class="subcategoryOption">
<div class="image">
<img src="vista/imgs/grupales.gif" alt="Clases grupales" />
</div>
<div class="text">
TEXT
</div>
</div>
</div>
<div class="subcategory">Option 2</div>
<div class="subcategoryContent">
<div class="subcategoryOption">
<div class="image">
<img src="vista/imgs/grupales.gif" alt="Clases grupales" />
</div>
<div class="text">
TEXT
</div>
</div>
</div>
And this jQuery code:
$(".subcategory").click(function () {
$(this).next(".subcategoryContent").slideToggle(450).siblings(".subcategoryContent").slideUp(450);
return false;
});

Remove all the "float"-properties from the CSS, and it'll work just fine! :-) The floats ruin the animations..

using jQuery to slide one div down and the other visible divs up (sliding content based navigation)

Figured I would ask here because I can't seem to find an easy solution or a solution on here that fits my needs. The problem I'm having with my site at the moment is when dealing with slide animations and with timing of those animations.
So when a user clicks one of my navigation buttons there is a panel that slides out the content based on the button pressed. if you click another button it will slide that one previous div back up and slide down the new content panel.
The main problem I'm getting is either I get animation timing issues because the other one starts sliding as the other one is for some reason.
All my content panels are siblings to one another...so here's the jQuery I'm using....any suggestions would be greatly appreciated!
$('a.navBtn').click(function(){
var divName = this.name;
$.when(function(){
$("#"+divName).siblings().filter(":visible").slideUp("slow");
}).then(function(){
$("#"+divName).slideDown("slow");
})
});
<div id="services">
<div class="noise_overlay">
<div id="contact"><img src="i/contact.png" /></div>
<div id="linkedin"><img src="i/linkedin.png" /></div>
<div id="facebook"><img src="i/facebook.png" /></div>
<div id="twitter"><img src="i/twitter.png" /></div>
<div id="flickr"><img src="i/flickr.png" /></div>
</div>
</div>
<div id="serviceContent">
<div id="contactContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="contactData">
<span>contact</span>
</div>
</div>
<div class="contentFooter"></div>
</div>
<div id="linkedinContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="linkedinData" class="mpCenter">
</div>
</div>
<div class="contentFooter"><span></span></div>
</div>
<div id="facebookContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="facebookData" class="mpCenter">
<span>facebook</span>
</div>
</div>
<div class="contentFooter"><span></span></div>
</div>
<div id="twitterContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="twitterData" class="mpCenter">
<span>twitter</span>
</div>
</div>
<div class="contentFooter"><span></span></div>
</div>
<div id="flickrContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="flickrData" class="mpCenter">
<span>flickr</span>
</div>
</div>
<div class="contentFooter"><span></span></div>
</div>
</div>

You need to chain your animation events so the slideDown doesn't happen until the slideUp is done:
http://api.jquery.com/slideUp/
$("#"+divName).siblings().filter(":visible").slideUp("slow", function() {
$("#"+divName).slideDown("slow");
});
Should be something like that.

I have made a simple jQuery snippet for you. The javascript:
$(function() {
$('a.navBtn').click(function(e) {
var pane = $(this).attr('name'),
switchPanes = function(name) {
if($('.contentPane:visible').attr('id') === name){
return;
}
if($('.contentPane:visible').length > 0){
$('.contentPane:visible').slideUp('fast', function() {
$('#' + name).slideDown('medium');
});
} else {
$('#' + name).slideDown('medium');
}
};
switchPanes(pane);
e.preventDefault();
});
});

Here's a working(?) version. I use the callback of the slideUP to call the slideDown.
http://jsfiddle.net/yazYF/
EDIT: Just like the Justin said, I just have some code to test with. :)
EDIT 2: Now with an initial pane visible
http://jsfiddle.net/yazYF/1/
EDIT 3: Initially nothing...
http://jsfiddle.net/yazYF/2/

Develop Reference

JavaScript is the programming language of the Web.

React slick stop going passed end - javascript

Seems like a bug that has already been resolved here. You are probably using an older version of react-slick. Try updating that package. I tested with 0.28.1 and this behaviour (called edgefriction) works (now) as you want it to.

Related

Vue js how to animate component display from top to bottom

Troubleshooting conflicting elements on a website

Open div panel inbetween two tweets?

slideToggle different effect over different DIVs

using jQuery to slide one div down and the other visible divs up (sliding content based navigation)

Categories

Resources