I bought Revolution Slider plugin for HTML (not wordpress) and i have wierd problem.
So i tried putting example slider on my page, and instantiate it, and everything works. I want full width slider with 420px height... But when i putt 420px in initialization of slider, i dont see textual content, because image gets to much in width and it makes overflowed slider thats hidden below content.
I dont know how to have full width image acting like background-size:cover in css... I dont want it to have auto height.
<!-- START REVOLUTION SLIDER 5.0 -->
<div class="rev_slider_wrapper">
<div id="slider1" class="rev_slider_wrapper fullwidthbanner-container" data-version="5.0">
<ul>
<li data-transition="fade">
<!-- MAIN IMAGE -->
<img src="img/slide1.jpg" alt="" >
<!-- LAYER NR. 1 -->
<div class="tp-caption News-Title"
data-x="left" data-hoffset="80"
data-y="top" data-voffset="450"
data-whitespace="normal"
data-transform_idle="o:1;"
data-transform_in="o:0"
data-transform_out="o:0"
data-start="500"></div>
</li>
<li data-transition="fade">
<!-- MAIN IMAGE -->
<img src="img/slide2.jpg" alt="" >
<!-- LAYER NR. 1 -->
<div class="tp-caption News-Title"
data-x="left" data-hoffset="80"
data-y="top" data-voffset="450"
data-whitespace="normal"
data-transform_idle="o:1;"
data-transform_in="o:0"
data-transform_out="o:0"
data-start="500"></div>
</li>
</ul>
</div><!-- END REVOLUTION SLIDER -->
</div><!-- END OF SLIDER WRAPPER -->
and tihs is init
jQuery(document).ready(function() {
jQuery("#slider1").revolution({
sliderType:"hero",
sliderLayout:"auto",
delay:9000,
navigation: {
arrows:{enable:true}
}
});
});
i tried here in init to put gridheight, gridwidth, sliderType:"fullwidth", sliderType:"standard", but none of that gives me fixed max width on image :S image is 1440x430, and i want it to take full width, and height as it can be, without stretching and taking more then those 430px.
What am i doing wrong. Here is no css at all, its bootstrap used, and no custom css on slider
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.
It needs to be placed on header section (revolution Slider - WP)
<!-- Place this tag where you want the Book Appointment to render. -->
<div class="lybrate-widget" identifier="/wgt/clinic/avis-hospital-sexual-medicine-and-mental-health-clinic"></div>
<span class="lybrate-powered">Powered by <a target="_blank" href="https://www.lybrate.com">Lybrate.com</a></span>
<!-- Place this tag just before the <body> tag. -->
<script type="text/javascript" src="https://www.lybrate.com/js/v104/widget/root.js"></script>
You can go to Revolution Slider -> Edit Slides and edit required slide (with buttons). Then click on button and specify Max Width and White Space values. Here an example:
Screenshot from revolution slider
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.
Long time reader, first time poster.
I have recently started learning to use bootstrap.
I am stuck trying to get the a Bootstrap carousel to preload showing a spinning wheel (or similar effect).
I have pieced together the effect I'm going for, my first four images 'flick through' and the carrousel stops on my final image – but what I can't manage is to have the entire carousel content load behind a spinning wheel before the carousel starts.
This is my work in progress – http://maxsendak.com/test/pu_v2/max.html – so you can see, it is the whole header tag that needs to load with a 'load in progress' before it fires the carousel script and starts flicking through the slides.
<header id="myCarousel" class="carousel carousel-fade" data-ride="carousel" data-wrap="false">
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<!-- START big image panel --><div class="item active">
<div id="top" class="header" style="background-image:url('http://www.maxsendak.com/test/pu_v2/img/people/max/1.jpg');">
<div class="text-vertical-center people_text_over_image">
</div>
</div>
</div><!-- END big image panel -->
<!-- START big image panel --><div class="item">
<div id="top" class="header" style="background-image:url('http://www.maxsendak.com/test/pu_v2/img/people/max/2.jpg');">
</div>
</div><!-- END big image panel -->
<!-- START big image panel --><div class="item">
<div id="top" class="header" style="background-image:url('http://www.maxsendak.com/test/pu_v2/img/people/max/4.jpg');">
</div>
</div><!-- END big image panel -->
<!-- START big image panel --><div class="item">
<div id="top" class="header" style="background-image:url('http://www.maxsendak.com/test/pu_v2/img/people/max/3.jpg');">
</div>
</div><!-- END big image panel -->
<!-- START big image panel --><div class="item">
<div id="top" class="header" style="background-image:url('http://www.maxsendak.com/test/pu_v2/img/people/max/5.jpg');">
<div class="text-vertical-center people_text_over_image">
<h1>Max Wilson</h1>
<h3>Creative</h3>
<br>
See More
</div>
</div>
</div><!-- END big image panel -->
</div>
</header>
Script to fire carousel needs to fire after everything is loaded.
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 500, //changes the speed
pause: "none",
})
</script>
As is often the case when I'm learning my way around these things, I think it might be that I am missing something simple – is this the case?
Remove the data-ride="carousel" - this is what triggers the carousel to start moving at page load. Instead you can start the carousel manually with javascript whenever you are ready with
$('.carousel').carousel()
Note - if you want to wait till your images have all loaded. You'd put this manual start in a window load like so
$(window).load(function() {
// + any other carousel related stuff that has to wait for the images to complete loading
$('.carousel').carousel()
})
jQuery solution would be adding d-block to all .carousel-item elements, and placing this at the bottom, after <body> tag:
$(window).on("load",function() {
$('.carousel-item').removeClass("d-block");
})
I have the Twitter Bootstrap carousel working quite well for the most part but my photos are of different widths and the caption on the bottom matches the widest width so when I have photos with less width the caption stays black for the previous width and looks a little unprofessional. My code is as follows and I was wondering if there is any way to fix this problem so the width always matches the photo.
<div class="row">
<div class="span8 offset2">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<!-- here I loop through and add a bunch of photos -->
{% for photo in record_photos %}
<div class="active item">
<img src="some-src">
<div class="carousel-caption">
<h3 class="center-it">some caption</h3>
</div>
</div>
{% endfor %}
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
I suggest picking a span size that will be the optimum size for the photo widths that you have as span will determine the carousel width. Larger images will shrink to the span width. Smaller images you could 'upsize' by placing them in a larger image with a solid (or transparent) background.
Carousel is designed to show images in the span it is in - conceivably you could dynamically alter the width but personally I think the changes would be somewhat visually jarring between images and there would be the back/next button locations to deal with as well.
BTW, note that in your template code above, every item is active. You will need to put some logic into the loop so that only the first loop iteration produces an item with active class