Search code examples
jquerycsssliderparallaxslick.js

Slick slider with jarallax library images are around half size at browser's maximize after restore down

Hi and Happy New Year to all, I am using slick jarallax javascript libraries together for image slider that is parallaxed. The images act as background and are in background-size: cover mode. When the browser is restored down from full size and then by slightly increasing its width the images are covering more than half size of the area, and the rest is left empty. Making browser at full size it's the same. I guess there is conflict between these two libraries, but could be possible it is a bug somewhere in css. If someone is eager to help, that would be great. Thank you, CP

$(document).ready(function(){
      // slider activity
			$('.fade').slick({
				infinite: true,
				autoplay: true,
				draggable: false,
                prevArrow: '<div class="slider-nav"><span class="span-left"><i class="prev fa fa-chevron-left" name="prev" aria-hidden="true"></i><i class="prev fa fa-chevron-circle-left" name="prev" aria-hidden="true"></i></span></div>',
                nextArrow: '<div class="slider-nav"><span class="span-right"><i class="next fa fa-chevron-right" name="next" aria-hidden="true"></i><i class="next fa fa-chevron-circle-right" name="next" aria-hidden="true"></i></span></div>',				
				pauseOnHover: false,
				useOnFocus: false,
				waitForAnimate: false,
				speed: 1500,
				autoplaySpeed: 7000,
				fade: true,
				cssEase: 'linear'
			});
			// parallax activity
			$('.jarallax').jarallax({
				speed: -0.2,
			});
		});
body {
	  position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-size: 15px;
	  background: white;
}
/* image slider */
.image-slider {
    position: relative;
    height: 100%;
    width: 100%;
}
.slider {
    position: absolute;
    width: 100%;
    height: 100%;
}
.slider div.one {
    background: url(https://cdn.pixabay.com/photo/2014/10/26/15/03/garden-by-the-bay-503897_960_720.jpg) no-repeat center center;
    position: absolute;
    display: inline;
    width: 100%;
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.slider div.two {
    background: url(https://cdn.pixabay.com/photo/2016/04/20/12/51/regensburg-1341093_960_720.jpg) no-repeat center center;
    position: absolute;
    display: inline;
    width: 100%;
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.slider div.three {
    background: url(https://cdn.pixabay.com/photo/2017/12/16/22/23/regensburg-3023439_960_720.jpg) no-repeat center center;
    position: absolute;
    display: inline;
    width: 100%;
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.slider .one a {
	position: absolute;
	top: 50%;
	z-index: 5;
}
.slider-nav {
    position: absolute;
    transform: translateY(-50%);
    width: 100%;
    top: 50%;
    z-index: 2;
}
@media screen and (min-width: 1025px) {
	.slider-nav .span-left .fa-chevron-left:before {
	    position: absolute;
	    content: "\f053";
	    margin: -29px 15px;
	    opacity: 1;
	    transition: opacity 0.3s;
	}
	.slider-nav .span-left:hover .fa-chevron-left:before {
	    position: absolute;
	    content: "\f053";
	    margin: 0 15px;
	    opacity: 0;
	    transition: opacity 0.3s, margin 0.3s;
	}
	.slider-nav .span-left .fa-chevron-circle-left:before {
	    content: "\f137";
	    font-size: 46px;
	    margin: 0 3px;
	    opacity: 0;
	    transition: opacity 0.3s;
	}
	.slider-nav .span-left:hover .fa-chevron-circle-left:before {
	    content: "\f137";
	    font-size: 46px;
	    margin: 0 3px;
	    opacity: 1;
	    transition: opacity 0.3s;
	}
	.slider-nav .span-right .fa-chevron-right:before {
	    position: absolute;
	    content: "\f054";
	    margin: -29px 4px;
	    opacity: 1;
	    transition: opacity 0.3s;
	}
	.slider-nav .span-right:hover .fa-chevron-right:before {
	    position: absolute;
	    content: "\f054";
	    margin: 0 4px;
	    opacity: 0;
	    transition: opacity 0.3s, margin 0.3s;
	}
	.slider-nav .span-right .fa-chevron-circle-right:before {
	    content: "\f138";
	    font-size: 46px;
	    margin: -12px -13px;
	    opacity: 0;
	    transition: opacity 0.3s;
	}
	.slider-nav .span-right:hover .fa-chevron-circle-right:before {
	    content: "\f138";
	    font-size: 46px;
	    margin: -12px -13px;
	    opacity: 1;
	    transition: opacity 0.3s;
	}
}
.slider-nav span.span-left, .slider-nav span.span-right {
    position: absolute;
    border-radius: 50%;
    cursor: pointer;
}
.slider-nav span.span-left {
    left: 30px;
}
.slider-nav span.span-right {
    right: 60px;
}
.slider-nav span i {
    color: white;
    font-size: 26px;
}
.slider-nav div {
    position: absolute;
    left: 36px;
    text-align: left;
    font-size: 36px;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    z-index: 2;
    bottom: 4px;
    transition: all 0.3s;
}
@media screen and (max-width: 1024px) {
	.slider-nav .span-left .fa-chevron-left:before {
	    position: absolute;
	    content: "\f053";
	    margin: -29px 15px;
        opacity: 0.5;
	}
	.slider-nav .span-right .fa-chevron-right:before {
	    position: absolute;
	    content: "\f054";
	    margin: -29px 4px;
        opacity: 0.5;
	}
	.slider-nav .span-left .fa-chevron-circle-left:before {
		display: none;
	}
	.slider-nav .span-right .fa-chevron-circle-right:before {
		display: none;
	}
}
/* content */
.content {
	position: relative;
	width: 100%;
	height: 1000px;
}
/* slick slider correction for 1px background image height*/
/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    height: 100%;
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jarallax/1.9.3/jarallax.min.js"></script>
<div class="image-slider"> <!-- IMAGE SLIDER -->
		<div class="slider fade">
			<div class="one jarallax"></div>
			<div class="two jarallax"></div>
			<div class="three jarallax"></div>
		</div>
	</div>
	<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto cupiditate, aperiam illum sapiente. Fugiat, explicabo, vel hic laborum nisi ratione ut molestiae reiciendis libero tenetur veritatis quam, provident consequatur alias.</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

Solution

  • I actually found a solution. The problem lies in the jarallax library(I guess) where ID created by the library named 'jarallax-container-[n]' is given width that somehow fixes it on certain max-width parameter. Added this code into my CSS and everything works as it should now.

    div[id*="jarallax-container"] div {
width: 100% !important;
}

    I am adding this solution if someone else have fallen into this problem.

    $(document).ready(function(){
      // slider activity
			$('.fade').slick({
				infinite: true,
				autoplay: true,
				draggable: false,
                prevArrow: '<div class="slider-nav"><span class="span-left"><i class="prev fa fa-chevron-left" name="prev" aria-hidden="true"></i><i class="prev fa fa-chevron-circle-left" name="prev" aria-hidden="true"></i></span></div>',
                nextArrow: '<div class="slider-nav"><span class="span-right"><i class="next fa fa-chevron-right" name="next" aria-hidden="true"></i><i class="next fa fa-chevron-circle-right" name="next" aria-hidden="true"></i></span></div>',				
				pauseOnHover: false,
				useOnFocus: false,
				waitForAnimate: false,
				speed: 1500,
				autoplaySpeed: 7000,
				fade: true,
				cssEase: 'linear'
			});
			// parallax activity
			$('.jarallax').jarallax({
				speed: -0.2,
			});
		});
    body {
	  position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-size: 15px;
	  background: white;
}
/* image slider */
.image-slider {
    position: relative;
    height: 100%;
    width: 100%;
}
.slider {
    position: absolute;
    width: 100%;
    height: 100%;
}
.slider div.one {
    background: url(https://cdn.pixabay.com/photo/2014/10/26/15/03/garden-by-the-bay-503897_960_720.jpg) no-repeat center center;
    position: absolute;
    display: inline;
    width: 100%;
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.slider div.two {
    background: url(https://cdn.pixabay.com/photo/2016/04/20/12/51/regensburg-1341093_960_720.jpg) no-repeat center center;
    position: absolute;
    display: inline;
    width: 100%;
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.slider div.three {
    background: url(https://cdn.pixabay.com/photo/2017/12/16/22/23/regensburg-3023439_960_720.jpg) no-repeat center center;
    position: absolute;
    display: inline;
    width: 100%;
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.slider .one a {
	position: absolute;
	top: 50%;
	z-index: 5;
}
.slider-nav {
    position: absolute;
    transform: translateY(-50%);
    width: 100%;
    top: 50%;
    z-index: 2;
}
@media screen and (min-width: 1025px) {
	.slider-nav .span-left .fa-chevron-left:before {
	    position: absolute;
	    content: "\f053";
	    margin: -29px 15px;
	    opacity: 1;
	    transition: opacity 0.3s;
	}
	.slider-nav .span-left:hover .fa-chevron-left:before {
	    position: absolute;
	    content: "\f053";
	    margin: 0 15px;
	    opacity: 0;
	    transition: opacity 0.3s, margin 0.3s;
	}
	.slider-nav .span-left .fa-chevron-circle-left:before {
	    content: "\f137";
	    font-size: 46px;
	    margin: 0 3px;
	    opacity: 0;
	    transition: opacity 0.3s;
	}
	.slider-nav .span-left:hover .fa-chevron-circle-left:before {
	    content: "\f137";
	    font-size: 46px;
	    margin: 0 3px;
	    opacity: 1;
	    transition: opacity 0.3s;
	}
	.slider-nav .span-right .fa-chevron-right:before {
	    position: absolute;
	    content: "\f054";
	    margin: -29px 4px;
	    opacity: 1;
	    transition: opacity 0.3s;
	}
	.slider-nav .span-right:hover .fa-chevron-right:before {
	    position: absolute;
	    content: "\f054";
	    margin: 0 4px;
	    opacity: 0;
	    transition: opacity 0.3s, margin 0.3s;
	}
	.slider-nav .span-right .fa-chevron-circle-right:before {
	    content: "\f138";
	    font-size: 46px;
	    margin: -12px -13px;
	    opacity: 0;
	    transition: opacity 0.3s;
	}
	.slider-nav .span-right:hover .fa-chevron-circle-right:before {
	    content: "\f138";
	    font-size: 46px;
	    margin: -12px -13px;
	    opacity: 1;
	    transition: opacity 0.3s;
	}
}
.slider-nav span.span-left, .slider-nav span.span-right {
    position: absolute;
    border-radius: 50%;
    cursor: pointer;
}
.slider-nav span.span-left {
    left: 30px;
}
.slider-nav span.span-right {
    right: 60px;
}
.slider-nav span i {
    color: white;
    font-size: 26px;
}
.slider-nav div {
    position: absolute;
    left: 36px;
    text-align: left;
    font-size: 36px;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    z-index: 2;
    bottom: 4px;
    transition: all 0.3s;
}
@media screen and (max-width: 1024px) {
	.slider-nav .span-left .fa-chevron-left:before {
	    position: absolute;
	    content: "\f053";
	    margin: -29px 15px;
        opacity: 0.5;
	}
	.slider-nav .span-right .fa-chevron-right:before {
	    position: absolute;
	    content: "\f054";
	    margin: -29px 4px;
        opacity: 0.5;
	}
	.slider-nav .span-left .fa-chevron-circle-left:before {
		display: none;
	}
	.slider-nav .span-right .fa-chevron-circle-right:before {
		display: none;
	}
}
/* content */
.content {
	position: relative;
	width: 100%;
	height: 1000px;
}
/* slick slider correction for 1px background image height*/
/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    height: 100%;
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}
div[id*="jarallax-container"] div {
	width: 100% !important;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jarallax/1.9.3/jarallax.min.js"></script>
<div class="image-slider"> <!-- IMAGE SLIDER -->
		<div class="slider fade">
			<div class="one jarallax"></div>
			<div class="two jarallax"></div>
			<div class="three jarallax"></div>
		</div>
	</div>
	<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto cupiditate, aperiam illum sapiente. Fugiat, explicabo, vel hic laborum nisi ratione ut molestiae reiciendis libero tenetur veritatis quam, provident consequatur alias.</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>