Slick Carousel Permanently Off Screen - javascript

I'm attempting to create a slick carousel using the slick library http://kenwheeler.github.io/slick/
Slick is loading and it's applying classes, containers, buttons etc. properly but the slides are permanently off screen. The translate3d x value on the active slide is always set to be outside the window. When clicking the 'previous' button or dragging the slide I'm able to pull it into the screen but as soon as it reaches the 0,0,0 position it returns to being outside the screen immediately. Here is my attempt to get it to work
<div class="slick-slider homepage-slider">
<div>
<a href="#">
<div class="slide-content"><img src="http://placehold.it/350x150">
<div class="slide-text">
<h2 class="slide-title">Slide Title</h2>
<div class="slide-caption">
<p>Slide Summary</p>
</div>
</div>
</div>
</a>
</div>
<div>
<a href="#">
<div class="slide-content"><img src="http://placehold.it/350x150">
<div class="slide-text">
<h2 class="slide-title">Slide Title</h2>
<div class="slide-caption">Slide summary</div>
</div>
</div>
</a>
</div>
<div>
<a href="#">
<div class="slide-content"><img src="http://placehold.it/350x150">
<div class="slide-text">
<h2 class="slide-title">Slide title</h2>
<div class="slide-caption">
<p>Slide summary</p>
</div>
</div>
</div>
</a>
</div>
</div>
In my js file I'm using
jQuery(document).ready(function() {
jQuery('.homepage-slider').slick({
rtl: true
});
});
http://jsfiddle.net/q1qznouw/549/
note: dragging works on my webpage but not within the jsfiddle sandbox
I receive no javascript errors. Is there a reason why the slides are permanently at a translate3d position outside the browser window, and when dragging onto the screen returns outside the browser window when letting go?

The issue is with your rtl setting. This requires a bit of extra markup to work (from Slick docs):
Note: the HTML tag or the parent of the slider must have the attribute
"dir" set to "rtl".
If you change your slick parent div from this:
<div class="slick-slider homepage-slider">
To this:
<div class="slick-slider homepage-slider" dir="rtl">
That should sort it

Related

Why do my carousel images disappear (zero carousel height) when carousel slider is placed inside a div?

I am using this "Image Slider with Dots (pure JS)" codepen which works very well on the page by itself, but whenever I place it inside a div for example an "outer shell" the images in the slider disappear, but the dots stay visible. I am going to be using it on a page that has a content wrapper so that's how I ran into this issue of the carousel having zero height once it is placed inside another div.
Here is the HTML of the slider with my custom class "outer-shell" around it, which makes the slider have zero height:
<div class="outer-shell">
<!-- this slider can be used multiple times on the same page -->
<!-- don't change class names because slider will not work -->
<div class="slider">
<div class="imgs">
<!-- you can add divs with class img here and they will be
automatically added to slider -->
<!-- style="left: 0;" in case JS is disabled -->
<div class="img" style="left: 0;">
<span>Image 1</span>
</div>
<div class="img">
<span>Image 2</span>
</div>
<div class="img">
<span>Image 3</span>
</div>
<div class="img">
<span>Image 4</span>
</div>
</div>
<div class="dots"></div>
</div>
</div>
There's quite a bit of CSS and JS along with the HTML, I thought it would be easier to have it linked rather than pasting it here. "Image Slider with Dots (pure JS)"
I have spent a good amount of time using Chrome Developer Tools looking at the individual pieces of the slider (trying different overflow properties), and I think it comes down to the images have an absolute position, because when I deselect the css property the first image would show. I am not sure if the outer div is messing up the positioning of the page?
i think your .dots class have position: absolute; that is why it is shown inside your div without needed a height property and when you add height to outer-shell you can see images too.
<div class="outer-shell">
<div class="slider">
<div class="imgs">
<!-- you can add divs with class img here and they will be
automatically added to slider -->
<!-- style="left: 0;" in case JS is disabled -->
<div class="img" style="left: 0;">
<span>Image 1</span>
</div>
<div class="img">
<span>Image 2</span>
</div>
<div class="img">
<span>Image 3</span>
</div>
<div class="img">
<span>Image 4</span>
</div>
</div>
<div class="dots"></div>
</div>
</div>
.outer-shell{
height: 100%;
max-width:80%;
margin:0 auto;
}

Parallax scrolling and alternating text simultaneously

To preface, this might be helpful to see: http://www.sbs.com.au/theboat/
I am trying to replicate a similar effect here: https://codepen.io/summeropratt/pen/ExgXYwa
<div class="first-section"></div>
<div class="card-body">
<section class="cards">
<div class="center cards--inner">
<div class="card" data-rellax-speed="-3">
<h2>info 1</h2>
</div>
<div class="card" data-rellax-speed="0">
<h2>info 2</h2>
</div>
<div class="card" data-rellax-speed="1">
<h2>info 3</h2>
</div>
<div class="card" data-rellax-speed="3">
<h2>info 4</h2>
</div>
</div>
</section>
</div>
<div class="last-section"></div>
Here is what I am struggling with:
I would ideally like the text to fade in and out. First you see "info 1" fade into view then fade out before seeing "info 2" fade in/out, etc.
In the current snippet, the parallax scrolling starts as soon as your mouse hovers the element. This is an issue when your mouse is towards the bottom of your screen and the entire ".card-body" is not in view. It cuts off the content. I understand why, but how can I get around this? I want the entire view to be the blue background and nothing else.

jQuery match height for element throughout site and not just per page instance of element

I have a row of "cards" throughout my site and am using jquery match height plugin to create equal heights. This works on each page fine and makes equal size cards regardless of content. What I want to do is make the cards equal height on ALL pages of the site regardless of content in the cards. Is there way to use the plugin for this without setting a min or max height explicitly?
html:
<div class="col-md-4 col-card>
<div class="l-col-card”>
<!--icon row-->
<div class="image-container">
<img src="/img/cta.png" alt="" class="img-responsive">
</div>
<div class="card-content-column">
<!--title row-->
<h2 class="card__title">Test Cards</h2>
<!--content-->
<p class="card__text">Test Text</p>
</div>
</div>
</div>
jquery:
$('.col-card').matchHeight({
byRow: 0
});

ion-infinite-scroll does not work when scrolling both horizontally and vertically

Am working on a ionic app which has one page that has got horizontal scroll. I want to use ion-infinite scroll to both vertical and horizontal scroll but it is only working for horizontal scroll right now.
Can anyone temme if I can have infinite scroll for both horizontal scroll and vertical scroll in a same page ?
<div>
<ion-scroll direction="x" class="con-scroll-x" has-bouncing="true">
<div class="scroll-div">
<div class="scroll-div-item" ng-repeat="trips in globalPlaces.result_trip_search">
<img alt="title" src="img/list-img/1.jpg" />
<div class="scroll-item-caption">
<div class="caption-rect">
<img alt="title" src="img/ic_hiker.png" />
<span>{{ trips.count_ratio }}</span>
</div>
<div class="scroll-caption-text">
<p>Viaje a:</p>
<h3 class="title-break">{{ trips.end_city }}</h3>
</div>
<div class="scroll-caption-date">
<span>{{ trips.start_date }}</span> <img alt="title" src="img/ic_date.png" /> <span>{{ trips.end_date }}</span>
</div>
<div class="comm-user-img">
<!-- scroll-cap-user-pics -->
<!--<img scroll-cap-user-pics alt="title" src="img/list_user1.png" />-->
<img alt="title" src="{{ trips.profile_photo }}" class="comm-global-user-img" />
</div>
</div>
</div>
</div>
</ion-scroll>
</div>
The above code is making some problem in infinite scroll when i scroll vertically. It works good in horizontal.
Actually that is know bug in ionic, like when you are having ion-scroll and ion-infinite-scroll in same page ionic not able to fire infinite load.
Possible solution
Wrap your ion-scroll inside DIV and add ng-if to that DIV and in your controller set ng-if model to true.
Example
HTML
<div ng-if="PleaseShowMe">
<ion-scroll direction="x" class="con-scroll-x" has-bouncing="true">
<---other code--->
</ion-scroll>
</div>
Controller
$timeout(function()
{
$scope.PleaseShowMe = true;
},50);
Note: Even this way you can not achieve horizontal scroll, but what you can do it while scrolling vertical you can append data to horizontal scroll.

Scrollspy for Materialize not scrolling at all with Angularjs

I am trying to use scrollspy from Materialize (http://materializecss.com/scrollspy.html) to target each div that is created with ng-repeat.
However, it seems to me as if the scrollspy class is not doing anything. Instead of scrolling to that part of the page, the DOM just reloads and points to the portion of the page.
Another problem is that using href="/#community#sharingLove" is changing the website URL. Is there anyway for the scrollspy to work without adding to the URL?
<div class="full-height row" ng-controller="CommunityController">
<div class="col l10 main-content">
<div ng-repeat="principle in acmPrinciples" id ="{{principle.id}}" class="row full-width centering-text section scrollspy">
<div class ="col-md-12">
<h4>{{principle.title}}<h4>
</div>
<div class ="col-md-12 comm-description-container">
<p class="paragraph-style larger-font-size">
{{principle.description}}
</p>
</div>
<div class ="col-md-12">
<video class="responsive-video comm-video-height" controls>
<source ng-src="{{principle.videoURL}}" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="col l2 scroll-content">
<div class="row">
<div class="col hide-on-small-only m3 l2 scroll-items">
<ul class="section table-of-contents">
<li>Experiencing God</li>
<li>Sharing Love</li>
<li>Connecting Lives</li>
<li>Declaring Truth</li>
</ul>
</div>
</div>
</div>
</div>
I have linked included jQuery, bootstrap, and materialize. Last thing: other features of materialize work for me, just not the scrollspy. I also do
$(document).ready(function(){
$('.scrollspy').scrollSpy();
});
I think if you remove #/community from the hrefs it should work. The href should contain the id of the block, not extra url info. Eg try using
Experiencing God

Categories