I am working with bxslider and I'd like to have a different animation for the slide's text.
While the slide slides to the left, I'd like the text box to be fixed in the middle and the text to fade in/out.
Any ideas? I've been trying all day
Here is a pen: Codepen
HTML:
<div class="bxslider" id="banner">
<div>
<img src="img" />
<h3 class="msl-title">Test Article</h3>
</div>
<div>
<img src="img" />
<h3 class="msl-title">Test Article</h3>
</div>
<div>
<img src="img" />
<h3 class="msl-title">Test Article</h3>
</div>
</div>
JS:
$(document).ready(function(){
$('.bxslider').bxSlider();
});
CSS:
#banner .msl-title {
width: 80%;
max-width: 350px;
top: 50%;
background: white;
padding: 40px;
position: relative;
margin: auto;
overflow: auto;
display: table;
height: 160px;
text-align: center;
transform: translateY(-65%);
border: 5px solid #61beb1;}
in order to achieving this you need a different aproach, because the box its inside the slider, it is hard to make fixed, but if you put the textbox outside the slider wrapper you can simply control the behaviour with the custom bxslider
$(document).ready(function(){
$('.msl-title').find('a').text(
$('#banner').children().first('div').data('text') );
$('.bxslider').bxSlider({'onSlideBefore':function(el,oldIndex,newIndex){
$('.msl-title').fadeOut(200,function(){
$('.msl-title').find('a').text($(el).data('text'));
$(this).stop().fadeIn(200);
});
}});
});
And using data properties from jQuery you can set the Text for every slide in the div
<div data-text="Slide 1">
Working Demo
https://codepen.io/Teobis/pen/zLpWKM
Hope this helps
Managed to find the solution. Simply take the info from the slider title and print it in an external div
var slideActive = $('.msl-item.active-slide .msl-title.active-text a').attr( "title" );
$( ".slider-title-box h3" ).text( slideActive );
The first line is looking for the slide title and the second line is printing it in the new div.
I gave absolute position to .slider-title-box so it'd fit over the slider.
Hope this helps another trying to achieve this
I am designing a webpage and want multiple images coming from one image using Javascript, CSS or Jquery whatever is required.
<img src="main.png" >
<img src="submain1.png" >
<img src="submain2.png" >
<img src="submain3.png" >
I am new to javascript and so it's getting difficult to solve it.
main.png is the main image and I want submain1.png, submain2.png, submain3.png images to come from the main.png one after the other as soon as the page loads.
As others have suggested, we think you are asking about sprite sheets. Now that you know a more common term for what you might be after you could try some searches. There are lots of CSS sprite issues on this site:
CSS Sprite Issues On StackOverflow
This is a quick demo:
#full { width: 389px; height: 186px; }
#window1 { background-position: 369px -11px; }
#window2 { background-position: 194px -91px; }
.iconback {
border: solid 1px;
background-image: url(http://www.icons-land.com/images/products/VistaPlayStopPauseIcons.jpg);
}
.window { width: 80px; height: 80px; margin: 1em; }
<div id="full" class="iconback"></div>
<div id="window1" class="iconback window"></div>
<div id="window2" class="iconback window"></div>
I'm trying to create a slider of images (previous/next) so the images slide to the left when I click "previous" and to the right when I click "next" with 0.5s of slowness, so it takes some animation. And when I reach the last image and click "next", I want images to "run backwards" to the first one, the same when I'm in the first one and click "previous", so it "run forward" until the last one.
I want the same behaviour this JSFiddle shows. (but I don't need the timer to move images automatically and don't need the "triggers" buttons, just "previous" and "next").
The problem here is that my images don't have fixed size. I define a width in percentage and can't define a height because I have responsive design, the image resizes as I resize the browser window.
The jQuery to previous/next actions is pretty easy, but I just can't find a way to add this animation when I remove/add the "active" class to my images (so they become visible or not).
I have already tried putting all images side by side and showing only the first one (setting container width equals to image width), so when I click "next" I just "move" the container to the left so it begins to display the next image, but it doesn't work because once I can't define the height of the images, they will appear underneath each other, not side by side.
JSFiddle
HTML
<div class="images">
<img class="active" src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>
<div class="previous">previous</div>
<div class="next">next</div>
CSS
img {
width: 100px;
display: none;
float: left;
}
img.active {
display: block;
}
jQuery
$('.next').on('click', function() {
var active = $('img.active');
var next = active.next('img');
if (next.length) {
active.removeClass('active');
next.addClass('active');
} else {
active.removeClass('active');
$('.images img:first').addClass('active');
}
});
Well the problem is the height for sliding.
First you need to have an element which is the "picture frame" which hold all the other images. That's important.
For better imagination a picture:
Now you have several technics to show and hide images. One could be to set the opacity. When using transition: opacity .15s ease-in-out; The one Picture is fading out and the next on is fading in.
For the slideshow effect is given to the position of the visible image to its width to the left and the image previously purely new to his wide to the right and then to 0. Thus, moves the current picture on the left the frame out and the new comes out right in.
And here is the difficulty if the height is not the same. If the current image 300px high and the new 400px, so the image frame here would adjust his height immediately once the new image start to be visible.
The content below would start to jump with each slide.
Is that so desired???
If yes, I can make you an example how it works.
You can actually do this in Pure CSS!
You use an ID and a label (with a for attribute=for the targeted id)
That's basically it. All you have left is to style it! (Forked from Joshua Hibbert's Pen)
body {
background: #f7f4e2;
}
/* Slides */
.slider input {
display: none;
}
/* Buttons */
.slider label {
display: none;
cursor: pointer;
position: absolute;
top: 6em;
left: 50%;
transform: translateX(-50%);
color: #fff;
background: #000;
padding: 1.36em .5em;
opacity: .6;
font-size: 19px;
font-family: fantasy;
font-weight: bold;
transition: .25s;
}
.slider label:hover {
opacity: 1;
}
.previous {
margin-left: -188px;
}
.next {
margin-left: 188px;
}
#slide1:checked ~ .buttons .slide1 {
display: block;
}
#slide2:checked ~ .buttons .slide2 {
display: block;
}
#slide3:checked ~ .buttons .slide3 {
display: block;
}
#slide4:checked ~ .buttons .slide4 {
display: block;
}
/* Images */
.slider {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 300px;
margin-top: -150px;
margin-left: -200px;
white-space: nowrap;
padding: 0;
float: left;
transition: .25s;
overflow: hidden;
box-shadow: 0 0 0 3.12px #e8e8e8,
0 0 0 12.64px #eaebe4,
0 0 0 27.12px #000,
0 24px 3.824em 5.12px #000;
}
.slide {
width: 500em;
transition: .25s;
}
.slider img {
float: left;
width: 400px;
height: 300px;
}
#slide1:checked ~ .slide {
margin: 0;
}
#slide2:checked ~ .slide {
margin: 0 0 0 -400px;
}
#slide3:checked ~ .slide {
margin: 0 0 0 -800px;
}
#slide4:checked ~ .slide {
margin: 0 0 0 -1200px;
}
<div class="slider">
<input type="radio" name="slide" id="slide1" checked="true" />
<input type="radio" name="slide" id="slide2" />
<input type="radio" name="slide" id="slide3" />
<input type="radio" name="slide" id="slide4" />
<div class="buttons">
<!-- Slide 1 -->
<label for="slide4" class="slide1 previous"><</label>
<label for="slide2" class="slide1 next">></label>
<!-- Slide 2 -->
<label for="slide1" class="slide2 previous"><</label>
<label for="slide3" class="slide2 next">></label>
<!-- Slide 3 -->
<label for="slide2" class="slide3 previous"><</label>
<label for="slide4" class="slide3 next">></label>
<!-- Slide 4 -->
<label for="slide3" class="slide4 previous"><</label>
<label for="slide1" class="slide4 next">></label>
</div>
<div class="slide">
<img src="http://dribbble.s3.amazonaws.com/users/322/screenshots/872485/coldchase.jpg">
<img src="http://dribbble.s3.amazonaws.com/users/322/screenshots/980517/icehut_sm.jpg">
<img src="http://dribbble.s3.amazonaws.com/users/322/screenshots/943660/hq_sm.jpg">
<img src="http://dribbble.s3.amazonaws.com/users/322/screenshots/599584/home.jpg">
</div>
</div>
Although this method is the most compatible (except for old versions of IE) and depending on how you animate it this method can be more time consuming than a JS method, but can also be faster, it just depends on how you want the animations to go, or you could use a css library that does this for you.
Here are some css image sliders I recommend.
10 Amazing Pure CSS3 Image Sliders
http://bashooka.com/coding/pure-css3-image-sliders/
Pure CSS Image Slider Without Javascript #Codeconvey is a good solution for what you're looking for, but lots of CSS
http://codeconvey.com/pure-css-image-slider/
The downside to these along with what you're working on is that you can't touch to slide on a phone or tablet which is more common now a days with photo galleries.
I recommend checking out Fotorama it's amazing! :)
Perhaps not the ideal situation but at least it will give you an idea. you can use the animation function of jQuery and I also changed your code a bit. See demo here
Within your HTML I would say this:
<div id="images">
<div class="images-wrapper">
<img src="http://www.cutestpaw.com/wp-content/uploads/2016/02/In-the-spotlight.jpg">
<img src="http://www.cutestpaw.com/wp-content/uploads/2016/02/Bath-time-with-ducky.jpg">
<img src="http://www.cutestpaw.com/wp-content/uploads/2016/03/FB_IMG_1452981788903.jpg">
<img src="http://www.pictures-of-cats.org/images/Pixiebob-cat-list-of-cat-breeds-pictures-of-cats.jpg" />
</div>
</div>
<div class="previous">
previous
</div>
<div class="next">
next
</div>
and within your jQuery code you can animate the width:
$('.images-wrapper img:gt(0)').hide();
$('.next').click(function() {
$('.images-wrapper img:first-child').animate({width:'toggle'},350).next().fadeIn().end().appendTo('.images-wrapper');
});
$('.previous').click(function() {
$('.images-wrapper img:first-child').animate({width:'toggle'},350);
$('.images-wrapper img:last-child').prependTo('.images-wrapper').fadeOut();
$('.images-wrapper img:first-child').fadeIn();
});
With this implementation the whole process of changing and adding the active class to the image is removed and replaced by animation functions
Simplest solution (I think) is to force the items to be of the same size, by placing them in a div. You can even have the div show the image without the use of an img tag, by using the background-image CSS feature (see http://www.w3schools.com/css/css3_backgrounds.asp for more details).
The item CSS could look like:
.item {
background-size: contain;
background-position: center;
}
and in each item in the HTML:
<div class='item' style='background-image: url(img1.jpg)' />
<div class='item' style='background-image: url(img2.jpg)' />
<div class='item' style='background-image: url(img3.jpg)' />
I finally got there.
HERE is the fiddle with the solution I developed.
The main problem in the implementation of this image slider was that images, althought were all the same size, have dynamic width (defined in % on CSS) and dynamic height (not defined on CSS).
The solution was basically put an "fake" image (with opacity: 0) inside my container so the container get the actual size of images I will use in the slider; put a div to "hold" the real images with position: absolute and give it a width calculted by number of images * 100%; and for last, give each image in my slider a width of x%, based on number of images.
In the jQuery, I "move" the "images holder div" always by %, never by static values, once the width of everything can change if I resize the window.
If you start to slide the images to the left and right and then resize the window, you will see that it continues to work perfectly.
I have implemented using css3 animations. However this will require manipulating animation values in css every time a slide gets added or removed.
#keyframes slideAnim {
0% {
transform: translateX(0)
}
12.5% {
transform: translateX(0%);
}
25% {
transform: translateX(-25%);
}
37.5% {
transform: translateX(-25%)
}
50% {
transform: translateX(-50%)
}
62.5% {
transform: translateX(-50%)
}
75% {
transform: translateX(00%);
}
89.5% {
transform: translateX(00%)
}
100% {
transform: translateX(00%)
}
}
Here the animation values are set such that there is a pause between slide transitions. I have added a parent frame to show only one slide at a time.
Please refer this fiddle.
I have installed the JQuery Cycle Plugin on my site and it works fine but for the first image which appears floating off to the right when the page loads. This just happens to the first image - all others are ok.
I am not sure why this is occurring as all my code is very simple:
$(function() {
$('#banner').cycle('fade');
});
<div id="banner">
<img src="images/banner01.jpg" />
<img src="images/banner02.jpg" />
<img src="images/banner03.jpg" />
<img src="images/banner04.jpg" />
<img src="images/banner05.jpg" />
</div>
#banner
{
width: 750px;
text-align: center;
height: 370px;
margin: auto;
margin-top: 20px;
}
#banner IMG
{
width: 750px;
height: 320px;
}
I am not sure what I have done wrong or what I can do to fix it. Would anyone know?
The site is here if you want to look: http://austin7.org.au/
EDIT: I have tried moving the JQuery script to the bottom of the page too, to no affect. Also, I have tried using different images - they all have the same result.
Set the left to 0.
#banner img{
left: 0;
}
I am new to responsive design. I am trying to use Foundation orbit slider for my project.
I am not able get the captions displayed for the pictures. I have following code...
<div class="row">
<div class="twelve columns">
<div id="slider">
<img src="images/pic1.jpg" />
<img src="images/pic2.jpg" />
<img src="images/pic3.jpg" />
</div>
</div>
<span class="orbit-caption" id="captionOne">Here is a caption1...</span>
<span class="orbit-caption" id="captionTwo">Here is a caption2...</span>
<span class="orbit-caption" id="captionThree">Here is a caption3...</span>
</div>
When I tried this for first time it didn't work. I tried looking in Stackoverflow and tried
the fix given by commanderdemon. Still it didn't work. I dont even get the dark strip for caption on the pics.
In foundation.css I see that display is set to none for the class orbit-caption
/* Captions ---------------------- */
.orbit-caption { display:none; font-family: inherit; }
.orbit-wrapper .orbit-caption { background: black; background: rgba(0, 0, 0, 0.6);
z-index: 30; color: white; text-align: center; padding: 7px 0; font-size: 13px;
position: absolute; right: 0; bottom: 0; width: 100%; }
By removing it I was able to see a tiny black strip (around 10px high) on the pic and the 3 captions are all appended and fallen out of the pictures.
Should the pictures be less than 400px in height? Is there a css fix required for this?
What am I doing wrong?
I have tried using just image tag instead of anchor tag. Both have same result.
P.S. I am using the foundation.css as it comes with download. I am not allowed to post a screen shot either...
Sorry found the mistake... I was supposed to put data-caption="#captionOne"
-Jody
In your js are 'captions' set to 'true' ?
<script type="text/javascript">
$(window).load(function() {
$("#featured").orbit({
captions : true
});
});
</script>
Provide same ID in image tag as in SPAN caption tag