Hi I'm usually using flexslider. Now i need a thumnail slider. But thumbnail should be vertical, it should have arrows and while clicking on it have to scroll upwards and downwards..Is that possible with flex slider? Can you guys help me?
Here is my code...
<section class="gallery-details-wrap row-fluid">
<div id="slider" class="gallery-details-slider flexslider">
<ul class="slides">
<li>
<img alt="" src="images/gallery-details-slider-1.jpg">
</li>
<li>
<img alt="" src="images/gallery-details-slider-1.jpg">
</li>
<li>
<img alt="" src="images/gallery-details-slider-1.jpg">
</li>
<li>
<img alt="" src="images/gallery-details-slider-1.jpg">
</li>
<li>
<img alt="" src="images/gallery-details-slider-1.jpg">
</li>
<li>
<img alt="" src="images/gallery-details-slider-1.jpg">
</li>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
<div id="carousel" class="gallery-details-carousel flexslider">
<ul class="slides">
<li>
<img alt="" src="images/gallery-details-thumb-1.jpg">
</li>
<li>
<img alt="" src="images/gallery-details-thumb-1.jpg">
</li>
<li>
<img alt="" src="images/gallery-details-thumb-1.jpg">
</li>
<li>
<img alt="" src="images/gallery-details-thumb-1.jpg">
</li>
<li>
<img alt="" src="images/gallery-details-thumb-1.jpg">
</li>
<li>
<img alt="" src="images/gallery-details-thumb-1.jpg">
</li>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
</section>
my script...
$(window).load(function(){
$('.gallery-details-carousel').flexslider({
animation: "slide",
controlNav: false,
directionlNav: true,
animationLoop: false,
slideshow: false,
itemWidth: 111,
itemMargin: 5,
maxItems: 5,
asNavFor: '.gallery-details-slider',
});
$('.gallery-details-slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: ".gallery-details-carousel",
start: function(slider){
$('body').removeClass('loading');
}
});
});
Related
I am using jquery SmartWizard control and want to show the toolbar vertically with the content for each tab to the right.However hen I run the below code, I get the error 'Element not found .nav'. What am I doing wrong? Any help is appreciated. Is it possible to make smartwizard show vertically with tab content to the side.
#model ApplicationViewModel
<div id="smartwizard">
<h3>Application</h3>
<div class="row">
<div class="col-3">
<ul class="nav flex-column nav-pills">
<li>
<a class="nav-link" href="#step-1">
Personal Information
</a>
</li>
<li>
<a class="nav-link" href="#step-2">
Education
</a>
</li>
<li>
<a class="nav-link" href="#step-3">
Professional Experience
</a>
</li>
<li>
<a class="nav-link" href="#step-4">
Business and Finanical Information
</a>
</li>
</ul>
</div>
<div class="col-9">
<div class="tab-content">
<div id="step-1" class="tab-pane" role="tabpanel">
<partial name="_PersonalInfo" model="Model" />
</div>
<div id="step-2" class="tab-pane" role="tabpanel">
Education
</div>
<div id="step-3" class="tab-pane" role="tabpanel">
Professional Experience
</div>
<div id="step-4" class="tab-pane" role="tabpanel">
Business and Finanical Information
</div>
</div>
</div>
</div>
</div>
#section scripts{
<script>
$(document).ready(function () {
// SmartWizard initialize
$('#smartwizard').smartWizard({
toolbarSettings: {
toolbarButtonPosition: 'right', // left, right, center
showNextButton: true, // show/hide a Next button
showPreviousButton: false, // show/hide a Previous button
toolbarExtraButtons: [$('<button></button>').text('Save')
.addClass('btn btn-info')
] // Extra buttons to show on toolbar, array of jQuery input/buttons elements
}
});
});
</script>
}
I seem to be able to find the question posted on here and google about the same issue in bootstrap, but i'm not able to find answers for the same issue in Materialize
I'm new to bootstrap and everything i've tried hasn't solved it. I'd be grateful if anyone knows why it's doing this and how to override it.
Thank you!
the live page is here
i've set drop downs to fire on 'about' and 'profile'
the script:
<script>
var $ = jQuery;
(function($){
$(function(){
$('.dropdown-button').dropdown({
inDuration: 300,
outDuration: 225,
constrain_width: false,
hover: false,
alignment: 'right',
gutter: 0,
belowOrigin: true,
});
$('.button-collapse').sideNav({menuWidth: 240, activationWidth: 70});
}); // end of document ready
})(jQuery); // end of jQuery name space
</script>
nav bar:
<nav>
<div class="nav-wrapper">
<a class="brand-logo hide-on-med-and-down left" href="http://focallocal.org">Focallocal</a>
<ul class="hide-on-small-and-down left">
<li class="text-icon">
<a class="dropdown-button" href="http://about.focallocal.org" data-activates="nav-about" title="About Us">
<i class="mdi-action-info"></i>
<span>About Us</span>
</a>
</li>
<li class="text-icon">
<a href="http://news.focallocal.org/" title="Happy News">
<i class="mdi-device-brightness-high"></i>
<span>Happy News</span>
</a>
</li>
<li class="text-icon">
<a href="http://action.focallocal.org/" title="Action">
<i class="mdi-action-get-app"></i>
<span>Action Centre</span>
</a>
</li>
<li class="text-icon">
<a href="http://activities.focallocal.org" title="Activities">
<i class="mdi-maps-directions-walk"></i>
<span>Activities</span>
</a>
</li>
<li class="text-icon">
<a href="http://gather.focallocal.org/" title="Gather">
<i class="mdi-image-flare"></i>
<span> Gather </span>
</a>
</li>
<li class="text-icon">
<a href="http://shop.focallocal.org/" title="Shop">
<i class="mdi-action-shop-two"></i>
<span> Shop</span>
</a>
</li>
<li class="text-icon">
<a class="dropdown-button" href="#" data-activates="nav-projects" title="Projects">
<i class="mdi-action-info"></i>
<span>Projects</span>
</a>
</li>
</ul>
<ul class="right">
<li class="text-icon">
<a href="http://discuss.focallocal.org" target="_blank" title="Chat">
<i class="mdi-communication-dialpad"></i>
<span>Discuss</span>
</a>
</li>
<li class="text-icon">
<a href="https://trello.com/invite/b/SwMdGGcX/dbf6c3cebca7e2214ac0df3a57b1881f/build-the-movement" target="_blank" title="Missions">
<i class="mdi-content-create"></i>
<span>Missions</span>
</a>
</li>
<li class="text-icon">
<a href="#" title="coming soon">
<i class="mdi-action-perm-media"></i>
<span>Profile</span>
</a>
</li>
</ul>
<ul id="user-dropdown" class="dropdown-content">
<li>Log in</li>
<li>Register</li>
</ul>
<a class="button-collapse" href="#" data-activates="nav-mobile"><i class="mdi-navigation-menu"></i></a>
</div>
</nav>
dropdowns:
<ul id="nav-about" class="dropdown-content">
<li>
About Us
</li>
<li>
Hire Us
</li>
<li>
Community Values
</li>
<li>
F.A.Q
</li>
<li>
The Road to Focallocal
</li>
<li>
Will we Succeed?
</li>
<li>
Focallocal in the news
</li>
<ul id="nav-projects" class="dropdown-content">
<li>
<a href="http://action.focallocal.org/">Action Center
</a>
</li>
<li>
<a href="http://brightertomorrowmap.com/">Brighter Tomorrow Map
</a>
</li>
<li>
<a href="http://morehappiness.focallocal.org/">More Happiness
</a>
</li>
When I resize my window, Flexslider does not resize. You can see my working code here.
I am following FlexSlider's example, and have reduced all possible variables.
<div class="flexslider">
<ul class="slides">
<li>
<img src="http://placehold.it/500x300" />
</li>
<li>
<img src="http://placehold.it/500x300" />
</li>
<li>
<img src="http://placehold.it/500x300" />
</li>
<li>
<img src="http://placehold.it/500x300" />
</li>
</ul>
</div>
$(document).ready(function(){
$('.flexslider').flexslider({
animation: "slide"
});
});
Turns out it's an issue with version 2.6.4 of FlexSlider. In the meantime, I just used version 2.6.3
This is my html code:
<nav class="nav nav-pills">
<li class="active text-center">
<img class="img-responsive" src="{{ FuImg::asset('img/mantee.svg') }}" alt="Camisetas Hombre">
<div>
<span>hombre</span>
</div>
</li>
<li class="text-center">
<img class="img-responsive" src="{{ FuImg::asset('img/womantee.svg') }}" alt="Camisetas Mujer">
<div>
<span>mujer</span>
</div>
</li>
<li class="text-center">
<img class="img-responsive" src="{{ FuImg::asset('img/babytee.svg') }}" alt="Body bebé">
<div>
<span>bebé</span>
</div>
</li>
</nav>
I need the active class dynamic in my nav pills li items.
How can I do it with vuejs 2?
<li class="text-center" :class={active: isActive} >
This basically says if this.isActive === true then the class "active" will be applied.
You have to set a property in your data object called isActive, and toggle it with javascript. When it is true, it will apply your class, when it it is false, it wont.
I’m using bootstrap slideshow in my app and I’m using some images and videos to slide, but the video is star playing automatically immediately when page got loaded. Can anyone help me how to fix this issue?
<div id="myCarousel" class="carousel slide">
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
<li data-target="#myCarousel" data-slide-to="6"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="/Content/Images/image-01" alt="">
</div>
<div class="item">
<img src="/Content/Images/image-02" alt="">
</div>
<div class="item">
<img src="/Content/Images/image-03" alt="">
</div>
<div class="item">
<img src="/Content/Images/image-04.png" alt="">
</div>
<div class="item">
<img src="/Content/Images/image-05.png" alt="">
</div>
<div class="item">
<img src="/Content/Images/image-06.png" alt="">
</div>
<div class="item">
<div class="embed-responsive embed-responsive-4by3">
<iframe src="/Content/Images/test-vedio.mp4" width="960" height="400" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
put your video inside a video element so you can manipulate its attributes:
http://www.w3schools.com/tags/tag_video.asp