Develop Reference

Swiper: How to remove blank spaces between each parallax transition

I am a beginner in Javascript and while working on my portfolio website, I came across Swiper Js.
I have successfully been able to make a working slider of 4 slides without parallax. But, when I make use of parallax feature of swiper, I started to notice the blank spaces appearing from the rightmost end.
To quickly fix this, I did slidesPerView: 1. It resolved my problem. But, not satisfied with it ( for I wanted slidesPerView: 1.2).
So, is there any way in which slidesPerView is preserved and the parallax causes no blank spaces?
NOTE: Any workaround using JS will also be accepted.
HTML
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slide-inner" style="background-image:url(https://raw.githubusercontent.com/supahfunk/supah-codepen/master/canyon-3.jpg)" data-swiper-parallax-x="90%"></div>
</div>
<div class="swiper-slide">
<div class="slide-inner" style="background-image:url(https://raw.githubusercontent.com/supahfunk/supah-codepen/master/canyon-2.jpg)" data-swiper-parallax-x="90%"></div>
</div>
<div class="swiper-slide">
<div class="slide-inner" style="background-image:url(https://raw.githubusercontent.com/supahfunk/supah-codepen/master/canyon-1.jpg)" data-swiper-parallax-x="90%"></div>
</div>
<div class="swiper-slide">
<div class="slide-inner" style="background-image:url(https://raw.githubusercontent.com/supahfunk/supah-codepen/master/canyon-4.jpg)" data-swiper-parallax-x="90%"></div>
</div>
</div>
</div>
CSS
.swiper-container {
height: 900px;
}
.swiper-slide {
overflow: hidden;
}
.swiper-slide-next{
border-right: 10px solid white;
}
.swiper-slide{
margin-left:0;
}
.slide-inner {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-size: cover;
background-position: center;
}
JS
var options = {
loop: true,
speed: 1000,
watchSlidesProgress: true,
mousewheelControl: true,
mousewheel: true,
allowSlidePrev: false,
slidesPerView:1.1,
parallax: true,
};
var swiper = new Swiper(".swiper-container", options);
Here is the fiddle regarding the same
The carousel moves on mouse scroll

jQuery Plugin Slick Carousel image alignment

this is my first question on stackoverflow.
Im currently working with Slick carousel jQuery Plugin and it works so far as I want it to work. There is only one issue left, I want different sized Images be centered horizontal and vertical, depending on their ratio. I think an image makes clear what I mean.
image
Thanks in advance!
edit: its not only about center divs vertically but also make maximum height and width of all tiles the same and also still keep responsivity.
$(".regular").slick({
dots: true,
infinite: false,
slidesToShow: 7,
slidesToScroll: 6,
responsive: [{
breakpoint: 1200,
settings: {
slidesToShow: 5,
slidesToScroll: 4
}
}, {
breakpoint: 992,
settings: {
arrows: false,
slidesToShow: 3,
slidesToScroll: 2
}
}, {
breakpoint: 768,
settings: {
arrows: false,
slidesToShow: 1,
slidesToScroll: 1
}
}]
});
html,
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.slider {
margin: 50px;
}
.slick-slide {
margin: 0px 10px;
}
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: blue;
}
#media screen and (max-width: 768px) {
.slick-dots {
position: initial !important;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<section class="regular slider">
<div>
<img src="http://placehold.it/150x300?text=1">
<p>text</p>
</div>
<div>
<img src="http://placehold.it/550x300?text=2">
<p>text</p>
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
<p>text</p>
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
<p>text</p>
</div>
<div>
<img src="http://placehold.it/350x300?text=5">
</div>
<div>
<img src="http://placehold.it/350x300?text=6">
</div>
<div>
<img src="http://placehold.it/350x300?text=7">
</div>
<div>
<img src="http://placehold.it/350x300?text=8">
</div>
<div>
<img src="http://placehold.it/350x300?text=9">
</div>
<div>
<img src="http://placehold.it/350x300?text=10">
</div>
<div>
<img src="http://placehold.it/350x300?text=11">
</div>
<div>
<img src="http://placehold.it/350x300?text=12">
</div>
</section>

Check this:
https://jsfiddle.net/7pa8jq4a/5/
I used to center:
display: flex;
align-items: center;
justify-content: center;
I added wrapper div to slide and to img style max-height and max-width;

I tweaked you version a little bit (in case you do not want flex-box):
https://jsfiddle.net/fr74h8k5/2/
.slick-slide .image {
height: 200px;
width: 100%;
margin: 0 auto;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}

Here is what you need:
1) at first, set section { text-align:center;}
2) set slick-track div to :
.slick-track{
display: flex;
align-items: center;
}
3) and for example
.slick-slide img {
..........
max-width: 150px;
max-height: 150px;
}
thats all (source: How to vertically center divs? )

I think what Im looking for is a JS or jQuery script that compares two tiles and if they have same size its set as default size and then all the other tiles use this size either as maximum width if their ratio is wider than the default ratio or as maximum height if their ratio is taller than the default ratio. This is only an idea, I dont know if its best solution or even is possible. Is this understandable? Its a pitty my JS and jQuery skills arent good enough to try something on my own.

Animating Multiple Divs

The following code works, but I have a problem since I want to have multiple portfolio objects like this one. If I use the current code it would raise all of the hidden divs (.slide) with text instead of one at a time based on hover. I can't use "this" since that would just make the picture animate upward. I could give everything ids and write a lot of JavaScript code that is repetitive, but I am almost positive that isn't the best way to do things.
Basically, How would you target a div with a hover effect that causes another div to do something and still be able to reuse the code?
The HTML for this section:
<div class="col-md-6 high">
<img class="port" src="http://loremflickr.com/320/240" alt="test">
<div class="slide">
<h3>Test Portfolio</h3>
</div>
</div>
The CSS for this section:
.high {
height: 200px;
overflow: hidden;
}
.port {
width: 100%;
height: 200px;
}
.slide {
background-color: rgba(74, 170, 165, 0.7);
color: white;
position: relative;
top: -34px;
height: 200px;
width: 100%;
padding: 20px;
text-align: center;
}
The JavaScript for this section:
$(document).ready(function(){
var portfolio = {
// moves div with text over portfolio picture on hover
hoverPort: function() {
$(".port").hover(function() {
$(".slide").stop().animate({"top" : "-110px"});
}, function() {
$(".slide").stop().animate({"top" : "-34"});
});
}, // end of hoverPort function
} // end of portfolio object
portfolio.hoverPort();
}); // end of document.ready

Of course you can use this, not to animate the element itself but to refer another "closest" element based on that:
$(".port").hover(function() {
$(this).next('.slide').stop().animate({"top" : "-110px"});
}, function() {
$(this).next('.slide').stop().animate({"top" : "-34"});
});
Demo Snippet
$(".port").hover(function() {
$(this).next('.slide').stop().animate({
"top": "-110px"
});
}, function() {
$(this).next('.slide').stop().animate({
"top": "-34"
});
});
.col-md-6 {
float: left;
width: 50%;
padding:25px;
box-sizing:border-box;
}
.slide {
position: relative;
top: -60px;
color: white;
background: red;
font-size: 2em;
font-family: sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 high">
<img class="port" src="http://loremflickr.com/320/240" alt="test">
<div class="slide">
<h3>Test Portfolio</h3>
</div>
</div>
<div class="col-md-6 high">
<img class="port" src="http://loremflickr.com/320/240" alt="test">
<div class="slide">
<h3>Test Portfolio</h3>
</div>
</div>

You can use jQuery "eq" selector.
$(".port").eq(0).hover(function() {
$(".slide").eq(0).stop().animate({"top" : "-110px"});
});
Hovering over the first "port" will animate the first "slide".

jquery cycle cssBefore, animIn, animOut dont accept relative values

I made a custom slide-transition with jquery cycle plugin which make the use of options: cssBefore, animIn, animOut necessary.
There are two slideshows with different widths side by side on desktopview with a fixed width.
There is a media query breakpoint, where the shows get one below the other and are supposed to get a width of 100%, which works fine so far, except one thing:
Because the cycle option accepting number values (for px) only, the transition don't adapts to the width of 100%.
Question is:
How can I make it so, that relative values are accepted?
And if this is not possible, is there another slider which offers the same transition as shown in the following example?
My Code:
HTML:
<div id="all">
<div id="s1" class="pics">
<img src="http://malsup.github.com/images/beach1.jpg" />
<img src="http://malsup.github.com/images/beach2.jpg" />
</div>
<div id="s2" class="pics">
<img src="http://malsup.github.com/images/beach3.jpg" />
<img src="http://malsup.github.com/images/beach1.jpg" />
</div>
</div>
Javascript:
$(function() {
$('#s1').cycle({
timeout: 0,
speed: 500,
fx: 'custom',
sync: 0,
cssBefore: {
top: 0,
left: -300, // <-- relative values here would be perfect
display: 'block'
},
animIn: {
left: 0
},
animOut: {
left: -300 // <-- relative values here would be perfect
},
cssAfter: {
zIndex: 0
},
delay: -1000
});
$('#s2').cycle({
timeout: 0,
speed: 500,
fx: 'custom',
sync: 0,
cssBefore: {
top: 0,
left: 700, // <-- relative values here would be perfect
display: 'block'
},
animIn: {
left: 0
},
animOut: {
left: 700 // <-- relative values here would be perfect
},
cssAfter: {
zIndex: 0
},
delay: -1000
});
});
CSS:
#all {width: 1000px;}
#s1 {width: 30%;}
#s2 {width: 70%;}
.pics {
float: left;
overflow: hidden;
height: 250px;
}
img {
display: block;
height: 250px;
width: 100%;
}
#media (max-width: 600px) {
#s1, #s2 {
float: none;
width:100%;
}
}
See the example on jsfiddle

I am not sure if there is any plugin BUT you can use Media Queries for example:
#media (max-width: 600px) {
#s2 {
width:300px;
font-size:14px;
}
}
this css will be executed when the screen size is less than or equal to 600px ONLY. and if the screen size is more than 600px your main css will be executed.
For full documentation about media queries: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
media query demo: http://www.webdesignerwall.com/demo/media-queries/
I hope this helps.

How to add loading DIV for angular js application?

I have simple application with angularjs and while data load in background it shows blank page, after angular js complete loading the template then I can view the data.
I want to add loading spinner while loading and once the loading complete then it should hide.
Almost 50-100 records, with images as well.
<ul id='example-messages' class='large-block-grid-1'>
<li ng-repeat='msg in messages'>
<!--<strong class='example-chat-username'>{{msg.startTime}}</strong>
{{msg.endTime}} -->
<h4><a ng-href="{{msg.offerUrl}}">{{msg.offerName}}</a></h4>
<div class="row">
<div class="medium-4 columns">
<a ng-href="{{msg.offerUrl}}"><img src="image.jpg" /></a>
</div>
<div class="medium-8 columns">
<h5><a ng-href="{{msg.offerUrl}}">{{msg.offerCondition}}</a></h5>
<h6>{{msg.offerDescription}}</h6>
<div class="row" style="padding-top:22px">
<div class="medium-5 columns">
<div class="alert-box success radius">{{msg.startTime}}</div>
</div>
<div class="medium-5 columns">
<div class="alert-box warning radius">{{msg.endTime}}</div>
</div>
</div>
</div>
</div>
</li>
</ul>

This is exactred from one of my live Angular projects:
HTML (index.html):
<div ng-controller="MainCtrl">
<div ng-cloak ng-show="loading" id="overlay">
<div class="loader"></div>
</div>
</div>
SCSS (basically just to keep the #overlay fixed on top of other layers, and have a nice animation applied to .loader):
#overlay {
background: rgba(0,0,0,.85);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
}
$colors:
hsla(337, 84, 48, 0.75)
hsla(160, 50, 48, 0.75)
hsla(190, 61, 65, 0.75)
hsla( 41, 82, 52, 0.75);
$size: 2.5em;
$thickness: 0.5em;
// Calculated variables.
$lat: ($size - $thickness) / 2;
$offset: $lat - $thickness;
.loader {
position: relative;
width: $size;
height: $size;
transform: rotate(165deg);
&:before,
&:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
display: block;
width: $thickness;
height: $thickness;
border-radius: $thickness / 2;
transform: translate(-50%, -50%);
}
&:before {
animation: before 2s infinite;
}
&:after {
animation: after 2s infinite;
}
}
Then of course, in the controllers, whenever you want to show or hide the loading indicator:
$scope.root.loading = true;
$scope.root.loading = false;

You can add a scope boolean variable with value set to false, and change the value to true in your http promise success.
JS code sample:
function myController($scope, YourDataServer) {
$scope.dataLoaded = false;
YourDataServer
.query()
.$promise
.then(
function(result) {
$scope.dataLoaded = true; // set the value to true
});
}
HTML would look like:
<div id="loadingBar" ng-show="!dataLoaded">Loading...</div>
<div id="dataWrapper" ng-show="dataLoaded">
<!-- data goes here -->
</div>

below are few links of loading indicator
angular-spinner or angular-sham-spinner
also read this BLOG which details on how the spinner works with angularjs
also if you want to implement it yourself, below code will get you started...
app.directive("spinner", function(){
return: {
restrict: 'E',
scope: {enable:"="},
template: <div class="spinner" ng-show="enable"><img src="content/spinner.gif"></div>
}
});
i havent tested the code but directive wont be more complex than this...