I am developing a site with parallax effect using the following plugin :-https://github.com/pixelcog/parallax.js/
I need to implement a slider in the first section. But the problem is that parallax plugin use
data-image-src="/path/to/image.jpg"
to render images.
Even though the slides are sliding, the image remains the same..i.e the image of the first slide.
I need to slide the images as well. Is there a workaround for this :-
<div class="carousel-inner" role="listbox">
<div class="item active parallax-window" data-parallax="scroll" data-image-src="http://localhost:8000/bs/project/images/home-slide-banner1.jpg">
<div class="carousel-caption">
Caption 1
</div>
</div>
<div class="item parallax-window" data-parallax="scroll" data-image-src="http://localhost:8000/bs/project/images/home-interactive-bg.jpg">
<div class="carousel-caption">
Caption 2
</div>
</div>
<div class="item parallax-window" data-parallax="scroll" data-image-src="http://localhost:8000/bs/project/images/goodwp.com_18663.jpg">
<div class="carousel-caption">
Caption 3
</div>
</div>
Please help
Related
I want to have my web layout setup like this on MD and larger:
img - content
content - img
But on a smaller screen I want the content to come first and then the image, like so:
content
img
I can do this with this line of code on my row where the row is img-content:
flex-column-reverse flex-md-row
But all of this is dependent also on how I order the HTML, I am using vue components, so I dont want to change my html order, it might add too much complexity
So I keep the HTML order consistent.
This is my code:
<div class="row p-5 flex-column-reverse flex-md-row">
<div class="col-md-6 col-sm-12 about-img-wrapper">
<img src="myimage.svg" alt="">
</div>
<div class="col-md-6 col-sm-12 about-text-center">
<h2 class="about-title ">lorem ipsum</h2>
<p class="about-p text-muted">lorem ipsum</p>
</div>
</div>
// Next row
<div class="row p-5 flex-column-reverse ">
<div class="col-md-6 col-sm-12 about-img-wrapper">
<img src="myimage.svg" alt="">
</div>
<div class="col-md-6 col-sm-12 about-text-center">
<h2 class="about-title "> lorem ipsum</h2>
<p class="about-p text-muted">lorem ipsum</p>
</div>
</div>
here is the setup in jsfiddle
The reverse class does reverse the order but The problem with this approach is for some odd reason, the next row that should be content-img, the image gets pushed to the next line.
Anyone got any idea why and how to have it not push to the new line?
A little bit of back n-forth found out the solution.
flex-column-reverse
-is a vertical reverseŕ,thus its always pushing it to the new line, so having it be the only one on it, our row doesn't know to change on a larger size so we add this:
flex-md-row-reverse
note the row in it, since we are setting it, horizontally
If you want content / image – content / image on small screens, then you should set the order that way. Then, to have the content and images switch place on larger screens, add order-md-first to the even lines.
I’ve modified the code from your Fiddle:
<div class="row p-5">
<div class="col-12 col-md-6 about-text-center">
<h2 class="about-title ">Title 1</h2>
<p class="about-p text-muted">Desc 1</p>
</div>
<div class="col-12 col-md-6 about-img-wrapper">
<h2>MY IMAGE1</h2>
</div>
</div>
// Next row
<div class="row p-5">
<div class="col-12 col-md-6 about-text-center">
<h2 class="about-title "> Title 2</h2>
<p class="about-p text-muted">Desc 2</p>
</div>
<div class="col-12 col-md-6 about-img-wrapper order-md-first">
<h2>MY IMAGE2</h2>
</div>
</div>
</div>
I am using the slick slider from https://kenwheeler.github.io/slick/ which is quite a nice slider overall. Is there a way to slide only certain div-s which are inside the whole slick-initialized div? In other words, here is a sample structure:
<div class="sliderdiv slick-initialized slick-slider">
<div class="slick-list">
<div class="slick-track">
<div class="slick-slide">
<div class="wrapper">
<div class="not-to-slide">
<h2>Some Title</h2>
<div class="somedeeperleveldiv">
<span>some text</span>
</div>
</div> <!-- end of divs that do not have to slide //-->
<div class="slideable">
<div>
<div>
some image or text
</div>
</div>
</div>
<div class="slideable">
<div>
<div>
some image or text
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The slider is initialized by:
$('.sliderdiv').slick({
some options
}).slick(slickFilter, '.slideable');
I've tried SlickFilter as in .slick(slickFilter, '.slideable'); but it gives ReferenceError: slickFilter is not defined
Is there a way to exclude the "not-to-slide" class div and everything that is inside that div from the slider? The idea here is to have only divs of class "slideable" to be used as slides.
A more general solution in case such "not-to-slide" divs appear inside divs that are to be slided would also be appreciated.
I am trying to align this Back button in a grid. I can only get to align to the top or center. Could someone provide an example on how to do this?
thx
<!-- Action bar clone -->
<div id="header">
<div class="col-xs-12 navbar-inverse navbar-top">
<div class="row" role="nav" id="topNav">
<div class="col-xs-2">
<div class="glyphiconHeaderBack"><i class="glyphicon glyphicon-arrow-left"></i></div>
</div>
<div class="col-xs-8 text-center glyphiconHeader"><h1>Test Header</h1></div>
<div class="col-xs-2> </div>
</div>
</div>
</div>
Out of the box bootstrap doesn't have a great vertical align option. In the past what I have done (and from most of what I've seen out there) is using padding to align items where you want. Adding some onto your back element aligns it much better for me.
padding:24px;
View it in action here: http://codepen.io/egerrard/pen/xEYOzy
I'm trying to build a profile card in Bootstrap 3 and I'm having trouble getting the image to fit into the card. I think I can do this easier if I link to image in the css but I have many profile cards with all different people so I think keeping the image link in the HTML is better in this case.
Here's how I'd like it:
and here's the where I'm at:http://jsfiddle.net/L3789n7u/1/
Any help is greatly appreciated. Thanks!
~Tony
<div class="container">
<div class="row">
<div class="people-cards">
<div class="col-md-6">
<div class="well">
<div class="profile-image">
<img src="https://higherlogicdownload.s3.amazonaws.com/MBGH/4f7f512a-e946-4060-9575-b27c65545cb8/UploadedImages/Board%20Photos/SIZE%20150x190/PAMELA%20HANNON%202015.jpg">
<div class="card-info">
<h3 div class="company">Company Name</h3>
<h4 div class="name">Person Name</h4>
<h5 div class="title">Job Title</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
As ever you have multiple options, here is example of one of them.
<div class="container">
<div class="row">
<div class="people-cards">
<div class="col-md-6" style="border: 1px solid black;">
<div class="row">
<div class="profile-image" style="float:left;">
<img src="https://higherlogicdownload.s3.amazonaws.com/MBGH/4f7f512a-e946-4060-9575-b27c65545cb8/UploadedImages/Board%20Photos/SIZE%20150x190/PAMELA%20HANNON%202015.jpg" />
</div>
<div class="profile-info">
<h3 div class="company">Company Name</h3>
<h4 div class="name">Person Name</h4>
<h5 div class="title">Job Title</h5>
</div>
<div class="profile-link">
VIEW PROFILE
</div>
</div>
</div>
</div>
</div>
</div>
Basically you need to make profile image to float left, so other content will appear next to it. Also because your example how you would like it contains border around card you need to wrap image, info and link in row. If you want to customize image size you can still use all Bootstrap's col-size-number.
Working example on JSFiddle
i have downloaded a bootstrap carousel template and everything works fine aside from the controls of the carousel. I can see the controls but nothing happens when i click on the left or right control. Any help would be much appreciated. Here are (what i think are) the relevant lines of code:
thanks for your help !
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="carousel-caption">
<h1>Bootstrap 1 Carousel Layout</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
</div>
</div>
</div>
<div class="carousel-inner">
<div class="item">
<div class="carousel-caption">
<h1>Bootstrap 2 Carousel Layout</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
</div>
</div>
</div>
<div class="carousel-inner">
<div class="item">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel Layout</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<!-- /.carousel -->
here are the script references:
<!-- script references -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
I think you misunderstood the documentation. There should be only ONE <div class="carousel-inner">. This is the wrapper for your "items". Change your html between the indicators and the controls like this and you should have more success:
<div class="carousel-inner">
<div class="item active">
<div class="carousel-caption">
<h1>Bootstrap 1 Carousel Layout</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h1>Bootstrap 2 Carousel Layout</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel Layout</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
</div>
</div>
</div>
Also, if you want the carousel to automatically begin cycling on load, you can add: data-ride="carousel"To the outermost div (the one with your id)
EDIT: One other thing I forgot to mention...
If you don't add some content to the item div, you won't see anything, not even your captions. That's because the captions are set to the bottom of the item div. If you just want to test things out without the content, just add the following css to cause the item div to have some height (I also added a background color so the white text will show up better against the white background):
div.item {
height: 500px;
background-color: green;
}