I'm trying to make image slider with my own without using plugins.
1st question : How to make the animation horizontally
2nd question : Whatever the size of the image, it must cover the height and width of its container, but keeping the proportionalities original image. The image can be rendered partially. How to make this?
3rd question : About the code of the slide, if anyone finds any improvement to make it lighter and more elegant, would be welcome.
$(function(){
setInterval(function(){
var displayed = $(".img-header.displayed");
displayed.animate({opacity : 0}, 500, function() {
displayed.css("display","none");
displayed.addClass("not-displayed").removeClass("displayed");
if(displayed.next(".img-header.not-displayed").length == 0){
$(".img-header:first").css("display","inline-block").css("opacity","1");
$(".img-header:first").addClass("displayed").removeClass("not-displayed");
$(".img-header:first").animate({opacity : 1}, 500);
}
else{
displayed.next(".img-header.not-displayed").css("display","inline-block").css("opacity","1");
displayed.next(".img-header.not-displayed").addClass("displayed").removeClass("not-displayed");
displayed.next(".img-header.not-displayed").animate({opacity : 1}, 500);
}
});
}, 4000);
});
#slider-container{height: 200px; width: 200px;}
#slider-container img.img-header{ width: 100%; height: auto;}
.displayed{display: inline-block;}
.not-displayed{display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider-container">
<img class="img-header displayed" src="http://i.stack.imgur.com/AIHnl.png" />
<img class="img-header not-displayed" src="http://i.stack.imgur.com/XQrms.png" />
</div>
I think you might be looking for something like this.
The slider here is position:relative; with top:100px; you can set as per your requirement. Still i suggest you to keep it positioned relative.
Slider has width:700px and height:500px;, you can change as per your requirement, it will be fine for whatever aspect ratio of image you have or all images with different aspect ratio.
There is an array for images to load which are serially numbered in one location, so you may give little more understanding into that. I have made a comment for that in JS file
Also you could change slider speed and delay as per your requirements.
When you hover over image it will pause the slider, which resumes after you leave image.
Snippet :
$(document).ready(function(){
var noPannel = document.getElementsByClassName("pannel").length;
var i;
var imgArr = [ ];
var pannelWidth = $(".slider_holder").width();
var totalWidth = noPannel*pannelWidth;
for (i=1;i<=noPannel;i++)
{
imgArr[i] = "http://www.picget.net/background/" + i + ".jpg"; //if you have somewhere on other path
//imgArr[i] = " " + i + ".jpg"; //use this if you have image in same folder/path.
}
for(i=1;i<=noPannel;i++)
{
$(".pannel:nth-child("+i+")").css("background","url("+imgArr[i]+")");
}
function jsslider()
{
var curScroll = $(".slider").scrollLeft();
var endScroll = totalWidth - (pannelWidth*2);
if(curScroll<=endScroll)
{
$(".slider").animate({scrollLeft: '+=' + pannelWidth +'px'},900,"swing");// Replace 900 for speed
}
else
{
$(".slider").animate({scrollLeft: '0px'},500,"swing"); // Replace 500 for speed to go bck to first
}
}
var interval = setInterval(jsslider, 3000); // Replace 3000 for delay between each slide.
$(".pannel").hover(function () {
clearInterval(interval);
}, function () {
interval = setInterval(jsslider, 3000); // Replace 3000 for delay between each slide.
});
}); // document.ready ENDS
html, body, *
{
margin:0px;
width:100%;
height:100%;
}
.slider_holder
{
margin-left:auto;
margin-right:auto;
display:block;
position:relative;
top:100px;
width:1024px;
height:768px;
background:#eee;
overflow:hidden;
}
.slider
{
width:auto;
height:100%;
width:100%;
white-space: nowrap;
overflow:hidden;
}
.pannel
{
margin:0px;
display:inline-block;
width:100%;
height:calc(100% - 1px);
/*border:1px solid red;*/
background-size:cover !important;
background-repeat:no-repeat;
background-position:50% 50% !important;
position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body onload="sliderFunc()">
<div class="slider_holder">
<div class="slider">
<span class="pannel"> </span>
<span class="pannel"> </span>
<span class="pannel"> </span>
<span class="pannel"> </span>
<span class="pannel"> </span>
</div>
</div>
</body>
Related
I have one problem that is was how to add rotateY(36deg) every 5 sec.
like:- 36deg after 5 sec it will become 72deg like so on
this is link:-
but there is no autoplay option.
http://www.jqueryscript.net/demo/Minimal-3D-Perspective-Carousel-with-jQuery-CSS3-3D-Carousel/
this is some css approach with jquery see on link FIDDLE
and this is code snippet
also u can add animation by searching little bit more
var a = 0;
$(document).ready(function(){
setInterval(function() {
a=a+36;
console.log(a);
$('.numcountbyinterval').text(a);
$('.rotate').css({ 'transform': 'rotateY(' + a + 'deg)'});
}, 500);
});
.rotate{
background-color:#ccc;
width:100px;
height:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="numcountbyinterval">0</span>
<div class="rotate">
Box inside wow
</div>
I set 500ms for the faster effect. Change 500 into 5000 to get 5sec and also remove perspective and perspective-origin css properties if you prefer 2d effect.
var box = document.getElementById('box');
var time = 5000;
var degPerTime = 36;
var framesPersecond = 32;
var intervalTime = 1000/degPerTime;
var degPerInterval = (degPerTime*intervalTime)/time
var rotate = 0;
setInterval(function(){
rotate -= degPerInterval;
box.style.transform = 'translateZ(-385px) rotateY('+rotate+'deg)';
},intervalTime);
body{
perspective: 500px;
perspective-origin: 10% 10%;
}
#box{
width:200px;
height:200px;
background-color:#33aaff;
position:relative;
top:100px;
left:100px;
}
<div id="box"></div>
I am trying to make a slideshow using jquery, I am a rooky in this code and am only familiar with css and html (though I am unsure how to position things in css). I want to create my slideshow and followed this template however I don't know how to change aspects of it, I tried messing around with it however no luck. My images are much bigger than the slide window created, I want to fit the image to the window, since now only a portion of the image is shown, which doesn't look very good.
So I was wondering how I could fit the complete image in that slidewindow (not a portion)
Here is what I have as html:
<div id="slideshow">
<div id="slideshowWindow">
<div class="slide">
<img src="Images/DSC_0419 copy.JPG" />
</div>
<div class="slide">
<img src="Images/DSC_1019 copy.JPG" />
</div>
<div class="slide">
<img src="Images/DSC_2975.JPG" />
</div>
</div>
</div>
My CSS:
#slideshow #slideshowWindow {
width:1000px;
height:700px;
margin:0;
padding:0;
position:relative;
overflow:hidden;
}
#slideshow #slideshowWindow .slide {
margin:0;
padding:0;
width:1000px;
height:700px;
float:left;
position:relative;
}
And this is my Jquery script:
<script type="text/javascript">
$(document).ready(function() {
var currentPosition = 0;
var slideWidth = 1000;
var slides = $('.slide');
var numberOfSlides = slides.length;
var slideShowInterval;
var speed = 3000;
slideShowInterval = setInterval(changePosition, speed);
slides.wrapAll('<div id="slidesHolder"></div>')
slides.css({ 'float' : 'left' });
$('#slidesHolder').css('width', slideWidth * numberOfSlides);
function changePosition() {
if(currentPosition == numberOfSlides - 1) {
currentPosition = 0;
} else {
currentPosition++;
}
moveSlide();
}
function moveSlide() {
$('#slidesHolder')
.animate({'marginLeft' : slideWidth*(-currentPosition)});
}
});
</script>
Try ...
#slideshow #slideshowWindow .slide img {
height: 100%;
width: 100%;
}
As it is, the CSS above will stretch the images ... if they are sized proportionately, this works fine ...
However, if you might be dealing with some images that are portrait and some landscape, try setting only height or only width; then, add adjustments to center when needed.
I'm wanting to set a min and max value for scrolling that way it isn't possible to scroll beyond the content inside of the slider. Right now, the code allows for infinite scrolling. I'm fairly new to Javascript but I've been coding for several years at a University.
JSFiddle
JavaScript
$('#vcards').width(function(){
var width = 0;
$('.vcard').each(function(){
width += $(this).outerWidth(true);
});
return width;
}());
$('#next').on('click',function(){
$('#vcards').animate({left : "-=170"});
});
$('#prev').on('click',function(){
$('#vcards').animate({left : "+=170"});
});
CSS
#slider{
width:500px;
overflow:hidden;
position:relative;
border:1px solid black;
height:225px;
padding:10px;
}
.vcard{
width:150px;
margin: 0 10px;
height:200px;
float:left;
border:1px;
text-align:center;
font-weight:bold;
background-color:green;
}
#vcards{
position:absolute;
top:0;
left:-170px;
}
HTML
<div id="slider">
<div id="vcards">
<div class="vcard">1</div>
<div class="vcard">2</div>
<div class="vcard">3</div>
<div class="vcard">4</div>
<div class="vcard">5</div>
</div>
</div>
<div id="next">Next</div>
<div id="prev">Prev</div>
You could try this:
$('#next').on('click',function(){
var v_offset = $('#vcards').offset();
var v_width = $('#vcards').width();
var left = v_offset.left;
var total = v_width - Math.abs(left);
var cont_w = $('#slider').width();
if(total>=cont_w)
$('#vcards').animate({left : "-=170"});
});
$('#prev').on('click',function(){
var v_offset = $('#vcards').offset();
var left = v_offset.left;
if(left<=0)
$('#vcards').animate({left : "+=170"});
});
I am new to javascript and I am trying to do a featured content slider something like the top banner in this website http://www.homeplus.co.kr
As you can see, the top big banner changes automatically & also will change when user hovers over one of the list at the right.
Right now I am able to do the hovering part, but I am still stuck at the automatic changing content part.
Here's a sample jsfiddle: http://jsfiddle.net/StormSdq/5tWPy/2/
<div class="pi">a</div>
<div class="pi">b</div>
<div class="pi">c</div>
<div class="pi">d</div>
<div class="c1">I DREAM</div>
<div class="c1">OF LLAMAS</div>
<div class="c1">JUMPING AROUND</div>
<div class="c1">EATING BUSHES</div>
css:
.pi {
font-size:12px;
color:#000;
font-weight:700;
width:30px;
height:25px;
margin-right:10px;
background:transparent;
border-bottom:solid 1px black;
}
.c1 {
border:1px solid blue;
background:lightskyblue;
width:200px;
height:200px;
float:right;
margin-right:430px;
margin-top:-100px;
color:red;
font-size:25px;
text-align:center;
display:none;
}
javascript:
div = document.getElementsByClassName('c1');
div[0].style.display = 'block'
B = document.getElementsByClassName('pi');
B[0].onmouseover = function () {
blip(0);
};
B[1].onmouseover = function () {
blip(1);
};
B[2].onmouseover = function () {
blip(2);
};
B[3].onmouseover = function () {
blip(3);
};
function blip(y) {
div = document.getElementsByClassName('c1');
for (x = 0; x < (div.length); x++) {
div[x].style.display = 'none';
}
div[y].style.display = 'block';
}
Any help will be greatly appreciated
Try this:
var cur = 0; // current index
setInterval(autoAnim, 2000); // auto change every 2s
function autoAnim(){
if(cur > 3) cur = 0;
blip(cur);
cur++;
}
Here is jsfiddle
You can use the function setTimeout to call something after XX miliseconds.
var number=0;
setTimeout(automatic,5000); // every 5 seconds
function automatic(){
blip(number);
number++;
if (number > 4)
number=0;
alert("Hello");
setTimeout(automatic,5000);
}
You will probably want to make the function sleep when mouse is hover and some others condtions
I am trying to create an infinite scroll of elements, and haven't found a plugin that was sufficiently lightweight/capable enough, so I'm trying to create my own.
So far it is working swimmingly, except for a slight jerkiness in the animation when I remove the first element and append it to the end of the parent. The example I've tossed up also has an issue where the elements lose their padding, for some reason, but that is not occurring in my actual code...
Fiddle:
http://jsfiddle.net/WtFWy/
Using the sample markup:
<section id="photos" class="bg-transparent-black">
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</section>
#photos{
position:absolute;
bottom:1em;
width:100px;
height:225px;
padding:3px;
overflow:hidden;
white-space:nowrap;
}
#photos div{
height:100%;
width:50px;
padding:3px;
display:inline-block;
position:relative;
border:1px solid black;
}
.red{background:red;}
.blue{background:blue;}
.green{background:green;}
And JavaScript:
scrollImages = function(){
var photoArea = $('#photos');
var children = photoArea.children();
var firstChild = $(children[0])
var firstOffset=firstChild.offset();
if(document.elementLeft === false){
document.elementLeft = firstOffset.left;
}
if(document.elementWidth === false){
document.elementWidth=firstChild.outerWidth(true);
}
if(firstOffset.left < 0 && (Math.abs(firstOffset.left) > Math.abs(document.elementWidth))){
photoArea.append(firstChild);
firstChild.css('margin-left', 0 + 'px')
children = photoArea.children();
firstChild = $(children[0])
firstOffset=firstChild.offset();
document.elementLeft = firstOffset.left;
document.elementWidth=firstChild.outerWidth(true);
}else{
}
document.elementLeft -= 1;
firstChild.css('margin-left', document.elementLeft + 'px');
t = setTimeout(scrollImages, 100);
}
document.elementLeft = false;
document.elementWidth = false;
var t = setTimeout(scrollImages, 500);
$('#photos').mouseover(function(){clearTimeout(t)});
$('#photos').mouseout(function(){scrollImages()})
});
If you remove the padding: 3px from #photos the animation works properly.