JQuery slider by changing left absolute position - javascript

So I had the idea to try to make an image slider where instead of fading in and out the sliders just move into place one by one, this is by adding 450px (width of each image slider).
However I'm struggling on how to accomplish this,I want to check wether the slider is the last so that the the slider reverts back to the first and starts again.
This is the code I came up with so far:
$(document).ready(function(){
var interval = 5000;//will move to left 450px each X seconds
var sliders = $('.slider_image');//counts number of sliders
var index = 0;
var show_index = 0;
setInterval(function() {
if(show_index == (sliders.length- 1))
{
$('.sliders_container').animate({ 'left': '0px'}, 2000);
}
else
{
$('.sliders_container').animate({ 'left': '+=450px'}, 1000);
}
}, interval);
});
/*SECTION SLIDER MARG START*/
.section_slider_marg_maincontainer{width:100%; height:275px; outline:2px solid white; position:relative; overflow:hidden;}
.section_slider_marg_items_container{width:auto; height:100%; position:absolute; top:0px; left:0px; display:flex; }
.section_slider_marg_item{height:100%; width:450px; outline:2px solid white; background-size:cover; }
/*SECTION SLIDER MARG END*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="section_slider_marg_maincontainer" style="">
<div class="section_slider_marg_items_container sliders_container" style="">
<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');"></div>
<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');"></div>
<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');"></div>
<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');"></div>
<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');"></div>
<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');"></div>
</div>
</section>

I would recommend using the Slick JQuery library for this. You can view it here:
http://kenwheeler.github.io/slick/
I edited the index.html file that they provided and here is what I ended up with (this will only work if you have the Slick library downloaded):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Slick Playground</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./slick/slick.css">
<link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
<style type="text/css">
</style>
</head>
<body>
<section class="carousel">
<img src="http://placehold.it/350x300?text=1">
<img src="http://placehold.it/350x300?text=2">
<img src="http://placehold.it/350x300?text=3">
<img src="http://placehold.it/350x300?text=4">
<img src="http://placehold.it/350x300?text=5">
<img src="http://placehold.it/350x300?text=6">
<img src="http://placehold.it/350x300?text=7">
<img src="http://placehold.it/350x300?text=8">
<img src="http://placehold.it/350x300?text=9">
</section>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).on('ready', function() {
$(".carousel").slick({
dots: true
});
});
</script>
</body>
</html>

As Toms was saying, each time you animate, you should increment a variable to keep track.
This probably is not the most elegant solution, but it uses your same code setup.
$(document).ready(function(){
var interval = 5000;//will move to left 450px each X seconds
var sliders = $('.slider_image');//counts number of sliders
var index = 0;
var show_index = 0;
var scrolledPx = 0;
setInterval(function() {
if(scrolledPx >= 450 * sliders.length - 1) {
$('.sliders_container').animate({ 'left': '0px'}, 2000);
scrolledPx = 0;
}
else{
$('.sliders_container').animate({ 'left': '+=450px'}, 1000);
scrolledPx += 450;
}
}, interval);
});

Related

jQuery fadeOut is inconsistent

I'm using jQuery and I'm trying to fade images out and in. Well, it's kinda weird, the image sometimes stays for much longer than expected, sometimes there's no fade, sometimes it only fades in.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var interval;
function startSlider() {
console.log("Slider Started.");
interval = setInterval(function () {
$(".slides > li:first")
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo(".slides");
}, 5000);
}
startSlider();
</script>```
My assumption is that your internet is probably slowing down the execution of the code. If you switch to a different network, or run on a mobile connection, does the fade work as expected?
To ensure the sliding, you can put startSlider() inside jQuery document ready() event.
$(document).ready(function() {
startSlider();
});
here is a test:
<html>
<head>
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var interval;
function startSlider() {
console.log("Slider Started.");
interval = setInterval(function () {
$(".slides > li:first")
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo(".slides");
}, 5000);
}
$(document).ready(function() {
startSlider();
});
</script>
</head>
<body>
<ul class="slides">
<li>item 1 <img src="https://i.imgur.com/HHSuvHp.png" style="width: 100px; height: 100px;"></li>
<li>item 2 <img src="https://i.imgur.com/oKe8JBR.png" style="width: 100px; height: 100px;"></li>
</ul>
</body>
</html>
Thank you all for trying to help, I'm not sure what the issue is but I've messed with the code and now it works:
$(function() {
$('.image img:gt(0)').hide(); // to hide all except the first image when da page loads
setInterval(function() {
$('.image :first-child').fadeOut(1000)
.next().fadeIn(1000).end().appendTo('.image');
}, 3000);
})
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
.image {
position: relative;
}
.image img {
width: 100%;
position: absolute;
border-radius: 2%;
}
.h {
text-align: center;
}
.a {
font-family: 'Poppins', sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>stuff</title>
</head>
<body>
<div class="h">
<h1 class="a">Automatic image transitions</h1>
</div>
<div class="image">
<img src="https://images.unsplash.com/photo-1593642532009-6ba71e22f468?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80" />
<img src="https://images.unsplash.com/photo-1620393470010-fd62b8ab841d?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" />
<img src="https://images.unsplash.com/photo-1620406968602-f7e7cd9febce?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw3fHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" />
<img src="https://images.unsplash.com/photo-1620415406067-68f6d8072fec?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxNnx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" />
<img src="https://images.unsplash.com/photo-1620398399445-a5359701d43c?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyNXx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" />
<img src="https://images.unsplash.com/photo-1620416530190-506ac680d67f?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyNnx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" />
<img src="https://images.unsplash.com/photo-1620321268133-000441fd17aa?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw4OHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" />
<img src="https://images.unsplash.com/photo-1620399489382-8e77838306ff?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw4OXx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>

Angular Js hide Div one by one with animation

I am looking to fadeout all Div (with css property display set to inline:block) with same class randomly one-by-one until 1 last random div remains. I am certainly able to do it with jquery but I am unable to make it work with fadeOut inline:block property.
So my div are aligned next to each other like
and I would need to hide them randomly one by one.
After a random div is removed
the removed div space should be retained as in css property visibility:hidden and the last div number which is left will be shown in JavaScript alert.
Here is my staring code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="lib/style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-animate.min.js"></script>
<script src="lib/script.js"></script>
</head>
<body class="container" ng-app="animateApp" ng-controller="mainController">
<div class="row">
<div class="col-xs-12">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</div>
</body>
</html>
Here is the fiddle https://plnkr.co/edit/OG1EmWjQi1bHj5OC69Z7?p=info
Any help is really appreciated.
You can define how items are hidden through the ng-hide CSS class. You can override the display attribute to keep it as inline-block, and use CSS animations to fade it away.
// Add your code here
angular.module("animateApp", [])
.controller("mainController", function($scope, $timeout) {
$scope.data = [1, 2, 3, 4, 5];
var hidden = [];
$scope.shouldHide = function(index) {
return hidden.indexOf(index) >= 0;
};
function hideRandom() {
if ($scope.data.length - 1 < hidden.length) {
return;
}
var randomTime = Math.floor(Math.random()*1000)
var randomElem = Math.floor(Math.random()*$scope.data.length);
while (hidden.indexOf(randomElem) >= 0) {
randomElem = Math.floor(Math.random()*$scope.data.length);
}
$timeout(function() {
hidden.push(randomElem);
hideRandom();
}, randomTime);
}
hideRandom();
});
/* Add your styles here */
.item{
height:30px;
width:30px;
display:inline-block;
border:1px solid #000000;
}
.item.ng-hide {
transition:0.5s linear opacity;
opacity:0;
display:inline-block !important;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-animate.min.js"></script>
</head>
<body class="container" ng-app="animateApp" ng-controller="mainController">
<div class="row">
<div class="col-xs-12">
<div class="item" ng-repeat="i in data track by $index" ng-show="!shouldHide(i)">{{i}}</div>
</div>
</div>
</body>
</html>

Rotate and move with JQuery not working

I need to rotate and move an image at the same time, actually works just one time, but then just move and not rotating.
This is what i have:
<!Doctype html>
<html>
<head>
<meta charset ="utf-8">
<title>JQuery Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(MyMain);
function MyMain(){
$(".cartman").hover(MoveCartman,Normal); //on hover Eric Cartman
var v1=100; //variable to move Cartman
function MoveCartman(){
$(this).attr("src","CartmanNude.png");
$(this).css({
"margin-top":v1+"px",
"transform":"rotateZ(-360deg)",
"transition":"1s"
});
if (v1<200){v1+=100;}
else {v1=0;}
}
function Normal(){
$(this).attr("src","CartmanNormal.png");
}
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div style="padding:0px">
<img class="img-responsive cartman" src="CartmanNormal.png">
</div>
</div>
</div>
</body>
</html>
I think this should work fine but I dont know why the function on hover is not working more than just 1 time.
Sorry for my bad english and thanks.
Try substituting lowercase d for D at doctype declaration , adding all to transition value before duration ; css "margin-top": "0px" , "transform": "rotateZ(0deg)" to Normal function
.cartman {
transition: all 1s;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(MyMain);
function MyMain() {
$(".cartman").hover(MoveCartman, Normal); //on hover Eric Cartman
var v1 = 100; //variable to move Cartman
function MoveCartman() {
$(this).attr("src", "http://lorempixel.com/100/100/cats");
$(this).css({
"margin-top": v1 + "px",
"transform": "rotateZ(-360deg)"
});
if (v1 < 200) {
v1 += 100;
} else {
v1 = 0;
}
}
function Normal() {
$(this).attr("src", "http://lorempixel.com/100/100/technics")
.css({
"margin-top": "0px",
"transform": "rotateZ(0deg)"
});
}
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div style="padding:0px">
<img class="img-responsive cartman" src="http://lorempixel.com/100/100/technics">
</div>
</div>
</div>
</body>
</html>

images on multiple backgrounds

I am trying to set up a javascript/jquery to display rotating images, infact I am trying to put anything I can on top of my multiple image background... I was able to make a mock banner and that was a success but I can't place an unordered list, a picture or the rotating images on my site.
my html is
<link rel="stylesheet" type="text/css" href="styles/main.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/javascript/main.js" type="text/javascript"></script>
</head>
<body>
<div id="massiveWrapper">
<div id="header">
<img src="/images/banner.png" alt="banner" width="1024px" height="150px"/>
</div>
<div id="menu">
<ul>
<li>hello</li>
<li>hello</li>
</ul>
</div>
<div id="rotatingWrapper">
<img class="rotateImage" src="/images/blue.png" alt="Computers" width="1024px" height="200px" />
<img class="rotateImage" src="/images/red.png" alt="Computers" width="1024px" height="200px" />
<img class="rotateImage" src="/images/green.png" alt="Computers" width="1024px" height="200px" />
</div>
<div>
<img src="/images/blue.png" alt="blue" width="1024px" height="200px"/>
</div>
</div>
</body>
</html>
my css is
body {
background: url(/images/background-top.png) 0 0 repeat-x,
url(/images/menu.png) 0 160px repeat-x,
url(/images/background-middle.png) 0 210px repeat-x;
background-color: #dadada;
}
#massiveWrapper {
width: 1024px;
margin: auto;
}
#rotatingWrapper {
width: 1024px;
height: 200px;
}
.rotateImage {
display: none;
position: absolute;
top: 0;
left: 0;
}
and javascript is
$(window).load(function() { //start after HTML, images have loaded
var InfiniteRotator =
{
init: function()
{
//initial fade-in time (in milliseconds)
var initialFadeIn = 1000;
//interval between items (in milliseconds)
var itemInterval = 5000;
//cross-fade time (in milliseconds)
var fadeTime = 2500;
//count number of items
var numberOfItems = $('.rotateImage').length;
//set current item
var currentItem = 0;
//show first item
$('.rotateImage').eq(currentItem).fadeIn(initialFadeIn);
//loop through the items
var infiniteLoop = setInterval(function(){
$('.rotateImage').eq(currentItem).fadeOut(fadeTime);
if(currentItem == numberOfItems -1){
currentItem = 0;
}else{
currentItem++;
}
$('.rotateImage').eq(currentItem).fadeIn(fadeTime);
}, itemInterval);
}
};
InfiniteRotator.init();
});
I really want to be able to have the rotating images I just cant for the life of me add anything new to the page. I have even added a dummy picture using div and img but that also wont show up... this is probably something small but yer I am new to coding.
Kane
You shouldn't add px to the width and height attributes of your images.
For example:
<img src="/images/banner.png" alt="banner" width="1024px" height="150px"/>
should be:
<img src="/images/banner.png" alt="banner" width="1024" height="150"/>

How to implement a javascript to the div element that is created in the javascript?

I am using this javascript from this link.
I have created a new div element in javascript using the following code
<script type="text/javascript" src="idangerous.swiper-1.9.1.min.js"></script>
<script type="text/javascript" src="swiper-demos.js"></script>
value= VALUE_FROM_DB.split("||");
for (k=0;k<value.length;k++)
{
if (value[0] == paramName1)
{
return unescape(value[k]);
console.log("no of swipe views ");
}
var val = k+1;
var superdiv = document.getElementById('swiper-wrapper');
var newdiv = document.createElement('div');
var divIdName = 'swiper-slide'+val;
console.log("div name: "+divIdName);
newdiv.setAttribute('id',divIdName);
newdiv.setAttribute('class','swiper-slide');
newdiv.style.width = "25%";
newdiv.style.height = "30%";
superdiv.appendChild(newdiv);
var cnt1 = '<div id="container" class="container"><span><img src="img/cause_'+val+'.png" style="float:left;"></span><div id="clinicals'+val+'" class="clinical"><span ><h5>'+value[k]+'</h5></span></div></div>';
console.log("check value"+cnt1);
document.getElementById(divIdName).innerHTML=cnt1;
console.log("clinical values: "+value[k]);
console.log("processsing parameter loop ");
var searchString = window.location.search.substring(1),i,val,params = searchString.split("&");
}
html code
<div id="swipe_body">
<div class="swiper-container swiper-threshold">
<div class="swiper-wrapper" id="swiper-wrapper">
</div>
</div>
</div>
css code:
.clinical
{
font-size:15px;text-justify:inter-word;margin-right:10px; margin-left:10px; margin-top:10px; margin-right:10px; margin-bottom:10px;
}
.container
{
background:url(img/value_bg.png) no-repeat scroll 0 0 transparent; background-size:100% 100%; display:block; width:304px; height:250px;text-align:justify;
}
.container span
{
width:auto; height:30%; display:block; overflow:hidden;float:left;
}
the output comes like this
but i would like to get it like this
on swiping i should get it like this
Please suggest me ways to solve this problem..
EDIT: I have given the following code after the style and before javascript.
</style>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/idangerous.swiper.css" />
<link rel="stylesheet" type="text/css" href="css/swiper-demos.css" />
<script type="text/javascript" charset="utf=8" src="cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="SQLitePlugin.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>
<script type="text/javascript" src="idangerous.swiper-1.9.1.min.js"></script>
<script type="text/javascript" src="swiper-demos.js"></script>
<script type="text/javascript" charset="utf-8">
EDIT 2:
var cnt1 = '<div id="container" class="container"><span><img src="img/cause_'+val+'.png" style="float:left;"></span><div id="clinicals'+val+'" class="clinical"><span ><h5>'+value[k]+'</h5></span></div></div>';
console.log("check value"+cnt1);
document.getElementById(divIdName).innerHTML=cnt1;
document.querySelector('.swiper-container');
i added this document.querySelector('.swiper-container'); as well as
function onDeviceReady()
{ var mySwiper = new Swiper('.swiper-container',{
mode:'horizontal',loop: true
});
The only improvement is that only the 1st slide is there, it's not swiping.
There is no Jquery in your code but only native javascript.
I recommend you to give a look at this plugin.http://plugins.jquery.com/jcarousel/
This is a jquery Carousel. I already used it and it's simple, well documented and flexible.
Click "view homepage" on the top right corner and check demos in the developper's page.
EDIT here a sample code using JCarousel to help you :
<script type="text/javascript" src="/path/to/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/path/to/lib/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="/path/to/skin/skin.css" />
<html>
<body>
<div id="swipe_body">
<div class="swiper-container swiper-threshold" id="mycarousel">
<div class="swiper-wrapper" id="swiper-wrapper">
<div id="container1" class="container"><span><img...</span></div>';
<div id="container2" class="container"><span><img...</span></div>';
<div id="container3" class="container"><span><img...</span></div>';
... ...
</div>
</div>
</div>
</body>
</html>
<script>
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
// optional configuration goes here
});
});
</script>
As you can see, only 2 line of jquery to get this.
You can download jquery.jcarousel.min.js at the url given above. Just create your several conteners with the data from the server. Remember, avoid giving same id to differents elements
for (k=0;k<value.length;k++){
...
var cnt1 = '<div id="container" cla
...
They will all have the same id.

Categories

Resources