I want to implement a carousel using the excellent Slick Slider(https://kenwheeler.github.io/slick/) which I have used for images before with no problems. I'm trying to create a 'center mode' slideshow like the example except using several div;
I want to do something like this;
These are the div's I want to use on codepen here - https://codepen.io/grabthereef/pen/mdymmgM
<!-- Single Card -->
<div class="single_slide">
<div class="row">
<div class="col-lg-4">
<div class="top-text">
<h1>DG Aurum</h1>
</div>
<div class="view-button">
<button type="button" class="btn btn-outline-danger-opposite shadow btn-sm m-1">Live View</button>
</div>
</div>
<div class="col-lg-8 text-center">
<img src="https://i.imgur.com/jieUOmw.jpg" class="shadow website-image" alt="website image">
</div>
</div>
</div>
The problem is when I add the Slick Slider code it messes the layout of the page;
https://codepen.io/grabthereef/pen/gObWBVG
I've tried looking through the other questions on here but I can't find a solution that works for me, I'm fairly new to JS.
If you go ahead and load the slick slider css file, that should pretty much fix the problem for you //cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css. I found this out only after making a very barebones version of the slick slider on my own codepen https://codepen.io/dthenley/pen/PowJbgN and proceeding from there. My slider was doing pretty much the same thing yours was right until I added the css code. I also loaded it with a document ready function
$(document).ready(function(){
$('.your-class').slick();
});
Related
if you go here site here and check with developer tools you will see this line
<!--Single portfolio item one-->
<section class="single-items center-block parallax m-0" id="home" style="background: url(innovative/img/single-portfolio1.jpg)">
<div class="container">
<div class="row">
<div class="col-md-12 center-col">
<div class="area-heading text-center wow fadeInUp" data-wow-delay="0.8s">
<h3 class="area-title text-capitalize alt-font text-white mb-2 font-weight-100 ">
Nuestro <strong>loren ipsun</strong>loren ipsun</h3>
<p class="text-white font-weight-300"> loren ipsun</p>
loren ipsun
</div>
</div>
</div>
</div>
</section>
lacks the * animated * class, tried :
manually setting animated css, bootstrap css, and animated js, wow js , did not work....
stripped down all the css and js and just left basic html with animate css and js and wow js, nothing happened
what could be happening ? , this template have bootstrap and animate css in one bundle js css file
wasted between 2, 4 hours debugging console and found not the culprit of this error
What i am trying is:
to enable the wow animate js css effect like this site site here
if you check with developer tools this last site you will see that will be adding animated class to wow fadein class.. however that is not happening in the first one... and do not know why!
what could be causing this?
It seems to me that you forgot to initiate the wow.js as told in the documentation, so you just need to add the initiation code to it. And a quick fix would be to add:
<script type="text/javascript">
new WOW().init();
</script>
Below <!-- custom script --> line in your code (or anywhere before </body> tag).
This may seem weird, I want to create a header as simple as this of Stack Overflow so I've been struggling writing the right codes.
<template name="DashboardLayout">
<hr>
<div class="row">
<div col-md-8 col-md-offset-9><center><input type="text" name="search" placeholder="Search.."></center> </div>
<div col-md-4 ><center><label>Profile</label></center> </div>
<div col-md-4 ><center><label>Settings</label></center> </div>
<div col-md-4 ><center><label>Videos</label></center> </div>
<div col-md-4 ><center><div class="dropdown">
<div class="dropbtn">Dropdown</div>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></center> </div>
</div>
<hr>
</template>
How can I achieve this using Bootstrap?
What are you asking for ? to give you the full HTML CSS and JS is needed ?
Check this link in Bootstrap the default example es basically what you want.
Logo, links (text or icon links), search bar and dropdown.
All responsive.
Then just play around the styles to get a better copy of this.
What you can do is add some custom classes for existing tags and write your own styles for corresponding classes.
or If you need simple customised version of this you can use this to build it easier
or this one https://work.smarchal.com/twbscolor/
read this if you want even mature look for your nav bar http://blog.jetstrap.com/2013/07/less-like-bootstrap/
When using transitions to navigate between two pages in my jQuery Mobile application, I see a blank page between the two pages. This behavior occurs at least on the Slide transition, fade does not show this behavior.
My page structure is like this:
<div id="MainPanelPage" data-role="page">
<div id="MenuLeft" data-role="panel">
...
</div>
<div data-role="header">
...
</div>
<div data-role="ui-content">
...
</div>
</div>
<div id="BannerPage" data-role="page">
<div data-role="header">
...
</div>
<div data-role="ui-content">
...
</div>
</div>
Note: jQuery Mobile wraps these divs into a global div automatically.
I am calling the transition with the following link:
<input type="submit" name="ctl25" value="Meer informatie" onclick="$.mobile.navigate('#BannerPage', { transition: 'slide' });" data-role="button" href="#BannerPage" data-transition="slide">
Please note that I am running ASP.NET and the language is kind of dirty in combination with jQuery Mobile.
I am running jQuery Mobile 1.4.5. After spending hours of trying I decided to ask here for a possible solution. Thanks in advance.
I have been struggling for some time on how to use shapes in Semantic UI.
I have been trying an example from their site http://semantic-ui.com/modules/shape.html#/definition but the animations are not working properly for me.
HTML CODE :
<div class="ui cube shape">
<div class="sides">
<div class="active side">
<div class="content">
<div class="center">
1
</div>
</div>
</div>
<div class="side">
<div class="content">
<div class="center">
2
</div>
</div>
</div>
</div>
</div>
JAVASCRIPT:
$('#btn').click(function(){
$('.shape').shape('flip up');
});
It's just a JQuery version problem:
This fiddle works.
This one doesn't.
So check the JQuery version you're using, it seems that the version should be upper than 1.8.
Semantic UI and Bootstrap will not play nice together when it comes to Shapes. You will have to manually remove the following CSS in Bootstrap to make it work:
.hidden {
display: none !important;
}
If having a .hidden class is crucial to your operation, rename it instead of removing it. Although I'm not familiar enough with Boostrap's inner workings to know if there are any internal dependencies on that class.
I have what should be a very simple modal using Twitter Bootstrap 3. The modal displays no problem, but it doesn't fade in from the top, as it does in this example, http://getbootstrap.com/javascript/#modals. Instead, it just plonks itself on the screen.
Here's the trigger:
<a href='#registerEmail' data-toggle='modal' class='btn btn-primary btn-lg'>Sign up with Email</a>
Here's the modal:
<div class='modal fade' id='registerEmail' tabindex='-1' role='dialog'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
This is the header
</div>
<div class='modal-body'>
This is the body
</div>
<div class='modal-footer'>
This is the footer
</div>
</div>
</div>
</div>
I am pretty sure that it was working before.
I checked out this other answer, Twitter Bootstrap: Modal popup won't fade, where the modal was nested within another .fade class, but that's not the case with my code above.
Also, I'm including the entire bootstrap javascript file (at the bottom of the page) so this can't be the problem. I am loading jQuery too (before the bootstrap js).
EDIT:
This is bizarre. In the process of creating a JS fiddle I went through and eliminated extraneous elements in the page, one at a time. When I commented out a line so that my own site-wide.js would not load in the document head, the problem ceased. I then restored the line that includes site-wide.js, but I can't recreate the problem???
Firstly, thanks for the comments above.
In the end I commented out some unnecessary javascript includes and that solved the problem. Presumably it was a namespacing issue? Interesting to see that it could manifest in such a subtle manner.