I use Roots theme (based on bootstrap) to develop custom WordPress sites. I've recently started using NextGen Gallery (and Gallery PRO) to add easily manageable photo galleries.
The issue I am having is a conflict between Bootstraps Carousel Interval Speed and NextGen Gallery. When NextGen is activated, the carousel speed sets itself to the default speed.
How can I get around this javascript conflict?
Here's the carousel script for the interval speed:
<script type="text/javascript">
$(document).ready(function(){
$('#centerSlider').carousel({
interval: 400
})
$('#rightSlider').carousel({
interval: 650
})
});
Here's the website I am having issues with: www.dirtyblondecocktails.com
The gallery page is where the NextGen Gallery resides.
Can see by my script above that the two carousels should move at different speeds and much slower than they currently do on the site. As soon as I deactivate the NextGen plugin, the two carousels work perfectly.
Yes, I have tried deactivating other plugins to narrow it down to this specific one.
You're not using any bootstrap css and required bootstrap js.
Without its not gonna work.
Bootstrap required jquery and bootstrap js to function Collapsed menu,carousal etc.
Related
I was wondering, has anyone encountered a slider library than can do the same styling (or maybe close) like the attached image?
Slider
I tried using both slick and owl carousel and styled via CSS and JS but I end up messing up the sliding functionality. I've been stuck browsing all available slider/carousel libraries.
Thank you in advance
I am trying to use the swiper js library : https://idangero.us/swiper/get-started/
It works fine but I have problem with initial loading ..its a carousel with multiple multiple carousel items. But when I load the carousel it loads the first slider item first, which covers the entire screen. Then it starts loading the other carousel items. I am using it in elementor, WordPress
I tried using below code as documented. I am using Jquery
https://github.com/nolimits4web/Swiper/blob/master/demos/150-freemode.html
What could I be possibly doing wrong for this case?
update:
i found that setting max-width for the swiper-wraper can fix the issue..any way to set that based on colomn count?
First, I would like to start by giving the link to our website:
www.mark-bumgarner.com
Now I will try to break down my dilemma.
I am using the theme "Thebe" to style our website. The theme comes with a built-in slider, which, unfortunately, CANNOT be used in the Header section or as a Hero Slider.
A few months ago, the theme's developer was kind enough to give me a custom script. The theme has a section in the dashboard where you can input custom JavaScript or CSS that made the slider (that was originally in the mid-section or body of the webpage) become the website's Hero Slider.
The said built-in slider, however, is very limited. The placement of the buttons, the transitions, and other functionalities are very limited.
Here's where I need assistance.
So I downloaded a slider plugin that pretty much allowed me to create my desired slider. How do I go about using the same method the developer did to move the said slider from the mid-section of my web page to the header?
Here's his code
$(function(){
if($('.ptsc.set-as-header').length > 0)
{
$('.main-content>.title-group').after($('.ptsc.set-as-header'));
$('.main-content>.title-group').remove();
}
});
Incidentally, he asked me to set the slider's css class to set-as-header
Let's say my new slider's css class is set-as-header-again
I'm having trouble getting Slick.js and the Foundation clearing lightbox to play nicely together. The way I have my site set up is that there are three 'pages', but each page is a Slick.js slide, so the site is really only one actual webpage.
In my photography 'slide', I have a basic lightbox setup with Foundation. However, I cannot get the lightbox to open properly when Slick.js is enabled. It works just fine when Slick.js is disabled.
You can see a live example here: www.kcfeatures.com/services.html
Here's a working live example (slick.js is disabled): www.kcfeatures.com/services1.html
For the life of me, I cannot figure out how to get it to work. My guess is that it has to do with the slick-track? Since the slick-track div is so wide it might be messing with how the lightbox is displayed. Lightbox also normally starts at the very top of the viewport, but with slick.js enabled it starts underneath the topbar, where the slider starts.
Any help or guidance would be greatly appreciated!
Even I tried to implement something similar but slick didn't allow my clearing lightbox to work.
Suggestions/Workarounds
Try Foundation 5 Reveal modal.
Have separate divisions for every thumbnail image that would contain the large version of the image. Tweak your code to trigger the reveal modal for every thumbnail displaying the larger version. However this will not allow you to move through other images as clearing lightbox would do. (You can implement a slick slider inside your reveal modal div to make that happen.)
How about using Foundation Tabs ?
I saw your website, except for the slide in effect of photography, videography and web design divs there is no need specific need for slick usage. I believe you can use Foundation Tabs and implement the same (Using clearing lightbox will be super easy now). If you want animation for your tabs you can refer Jquery Slide animations and implement the same for your tabs. You can also refer Foundation Tabs animation using this.
I have very little experience with the jquery libraries. I need to remove the arrows from the main slider and add bullets at the bottom(bullets to navigate the slides). Any one proficient with java script please guide me how to do it. Customizr is a free theme in wordpress.
Customizr has been build on Twitter's Bootstrap 2. Also the slider is based on a Bootstrap's component, see: http://getbootstrap.com/2.3.2/javascript.html#carousel.
In Bootstrap 2.x the carsousel does not offer support for indication of the total number of items in the carousel and the current position of the carousel. See also: Bootstrap carousel. Add pagination dots to bottom.
This function is add in Twitter's Bootstrap 3.x, see: http://getbootstrap.com/javascript/#carousel.
So to fix your problem, use the solution described here: https://github.com/twbs/bootstrap/issues/1993 or find a Theme ready for Twitter's Bootstrap 3 like Roots or JBST. The Twitter Bootstrap Slider also provides Bootstrap's carousel function to WordPress.