I'm using the simple.carousel.js for a simple small slider, where there is an image and some text. As you may know, this plugin uses the <ul> tag to slide the <li> elements. You can set the width and height of the carouselslider in javascript like
> $("ul.homecarouselslider").simplecarousel({
> height:200,
> width:160,
> visible: 1,
> auto: 25000,
> next: $('.offerright'),
> prev: $('.offerleft') });
If you dont set those dimensions in javascript, the .js file has default sizes to set. But i want this plugin to have different dimensions for each <li> element, because there is a larger image in it, or bigger text. If you exceed this height because the text has 250px height instead of 200px which is the limit for the slider, it doesnt display it. Any ideas how in this slider, the <li> elements can get the dimensions of the inner divs? Thank you in advance :)
PS. The html code is something like this:
<div id="offers">
<ul id="homecarouselslider" class="homecarouselslider" style="list-style-type:none;overflow:hidden;width:600px;height:190px;">
<li style="float:left;width:160px;height:190px;">
<div id="offer1">
<div id="offertitle"><?php echo $row['title']; ?></div>
<img id="offerimg" src="<?php echo $row['picture1']; ?>">
<div id="offerdesc">
<div id="offerdesctext"><?php echo $row['full_description']; ?> </div>
<div class="offerleft" id="offerleft"><img src="images/offerleft.png"> </div>
<div class="offerleft" id="offerright"><img src="images/offerright.png"></div>
<div id="offerbook">BOOK NOW</div>
</div>
</div>
</li>
</ul>
</div>
Why won't you use a maximum height for the carousel? The maximum height of a li element. Because I'm assuming that there is content under the carousel, and if you would implement it as you say, the content at bottom of the carousel would 'bounce' when you hva different heights.
If you still want that behavior, I recomand you to see if there is an overflow:hidden set to ul element, that I thinks that i set by carousel.js, and change it in your css file with overflow:visible !important.
Just remove the overflow:hidden for slider and use a bigger image.
Updated fiddle
Related
I am using GlideJS to display a carousel with images. I load this carousel in file A (carousel-test.php) by calling the following code:
<div id="carouselContainer"></div>
<script>
$( "#carouselContainer" ).load( "carousel.php" );
</script>
File B (carousel.php) contains the code of the carousel with the images:
<div class="module module--horizontal">
<div id="Carousel" class="glide">
<div class="glide__wrapper">
<ul class="glide__track">
<li class="glide__slide">
<div class="box" style="background-color: #77A7FB;">
<div>
<img src="http://www.brussels.info/grand-place-brussels.jpg" style="width:100%; height:100%;" />
</div>
</div>
</li>
<li class="glide__slide">
<div class="box" style="background-color: #FBCB43;">
Second slide
</div>
</li>
</ul>
</div>
<div class="glide__bullets"></div>
</div>
<script>
var carousel = $('#Carousel').glide({
type: 'carousel',
startAt: 1,
touchDistance: 2,
autoplay: 0,
autoheight: true
});
</script>
The problem is when you open file A (http://reistip.nl/carousel-test.php ) the first time, then the height of the image in the carousel is very small. The height should be 100% but is instead fixed to (about) 20 pixels. Once you start using the carousel, refresh the page or open the console.log the height of the image changes and becomes as it should be (100%).
How can I display the height of the image in the carousel to 100% when the page is opened for the first time?
(note: to reproduce this problem make sure to open a new tab in the browser after visiting file A, if you only refresh the page of file A the problem does not appear again)
you can't change the height of image by giving 100% because. an image height is already a 100% to it's height. if you really want to change the height of your image then you should define it in px value but i suggest you not to change the height because it will stretch your image. instead you can add certain height to your carousel wrapper and set overflow hidden. it will show the image inside wrapper and the overflow image will be hidden.
In my web page I have an anythingsider running. Which looks like this
<ul id="slider-main">
<li>
<div class=" right-2 up-3 ">
<div>
<img src="http://i.picresize.com/images/2015/08/10/zrsLx.jpg" class="img-responsive" width="1600" height="1070">
</div>
</div>
</li>
<li>
<div class=" right-2 up-3">
<div>
<img src="http://i.picresize.com/images/2015/08/10/zrsLx.jpg" class="img-responsive" width="1600" height="1070">
</div>
</div>
</li>
And My Slider Image looks like this
But when the screen resolution is low like 1366x768 Image does not act as responsive. Only few part of the image is shown in web. Can any one please tell me what I am doing wrong here?
Note: CodePen Link to my demo source
One quick solution: update the image height to fit the height of the viewport.
$(".img-responsive").height($(".anythingWindow").height())
Now this still needs some tweaking because as specified in the question comments:
If the screen width is larger than the picture width, then a blank space will be shown to the right of the image.
As there is a footer, the bottom part of the image is still hidden by it, so you'll need to adjust the picture height to the view area height - the footer height.
In the end the code would be like this:
$(".img-responsive").height($(".anythingWindow").height() - $("footer > div").height())
.width("100%");
And that code must be called when the page loads and when the page resizes. You can see it working on this Codepen.
I'm using HTML, CSS and Jquery and I did a image hover effect with the watch image and I want to be able to add the same image and effect with multiple images vertically down the center of the page but it wont let me, here's the site in question! any help would be great!
<div id="header">
<h1></h1>
</div>
<div class="center12">
<img src="image/logocenter1.png" alt="** PLEASE DESCRIBE THIS IMAGE **">
</div>
<div id="nav">
<h2>
Home / Styles & Sizes /
Brands & Prices /
Watch Straps / Tips on buying used
</h2>
</div>
<div class="fadehover">
<img src="image/test1.png" alt="" class="a"> <img src="image/test1bw.png" alt="" class="b">
</div>
It seems like it should be simple, but it wont work.
Instead of using jquery and two images for gray scale effect, use the following:
By adding an css you can bring the same effect using a single image(no need of jquery and hover image).
Add this css:
<pre>
img.a:hover {
filter: url("");
}
</pre>
and remove the jquery and another gray scale image. If you don't want hover effect and the images are needs to be shown one by one down, remove one of the images inside the div and put it into a separate Div'
I have a list where each item contains a text and an image:
<div class="slider">
<ul>
<li>
<div class="txt"><p>First slogan</p></div>
<div class="img"><img src="http://placehold.it/800x180" /></div>
</li>
<li> ... </li>
</ul>
</div>
I need it to be responsive ... the img and txt divs scale on window resize.
After a certain point the img div becomes under the txt div as seen in codepen:
SLIDE EXAMPLE
This is working fine ... But now I need to make it work as a slider.
I am trying to make it using Cycle2 JQuery plugin:
SLIDE EXAMPLE WITH CYCLE 2
The height does not adapt to the slide content.
Could someone please help me out?
Thank you,
Miguel
If you take a look at their documentation here it has plenty of options to adapt the height like adding
<div class="slider" data-cycle-auto-height="1:1">
Hope that helps.
I am using the new flex slider and I want to retain the dimensions of my images. It keeps re-sizing the images no matter what options that I use. Has anyone hard-coded, and option where you can retain a certain height and width for your FlexSlider viewport?
Are you using Flexslider 2
Try using a containing element with a class like, .flexcontainer, and with a set width or max-width in your css to match the width of your images:
<div class="flexcontainer">
<div id="my-slider" class="flexslider">
<ul class="slides">
...
</ul>
</div>
</div>