I am using Slidesjs to use a simple scroller on my site. However, I cannot hide the pagination that shows the 1 and 2 bullet points.
The link for the project is www.barterscloset.com
I have tried trying to hide it in css and in a Jquery.hide function.
Thanks in advance!
There's an option built in, add these lines to where you fire the plugin:
pagination: false,
generatePagination: false
so your whole call would look like this (if you had no other otpions set, that is)
$(function(){
$("#slides").slides({
pagination: false,
generatePagination: false
});
});
Related
Having trouble making 2 swiperJS Sliders work together.
The conflict seems to be in the for each, or the JS column in codepen / the external script file that initializes the slider.
Anyone have any ideas on how i can get them both to work together? For example, if you take the script from the 2nd one, and put it into the script column in slider one you'll see it breaks it. Or, if you do the opposite, it breaks it too.
It doesn't look like it's a matter of them both being called .swiper-container because the 2nd one ID's the swiper with #swiper1
SLIDER 1: Codepen
SLIDER 2: Codepen
The JS that makes this one work is:
(function () {
'use strict';
const mySwiper = new Swiper('#swiper1', {
loop: true,
autoplay: 4000,
slidesPerView: '1',
centeredSlides: true,
a11y: true,
keyboardControl: true,
grabCursor: true,
// pagination
pagination: '.swiper-pagination',
paginationClickable: true,
// navigation arrows
nextButton: '#js-prev1',
prevButton: '#js-next1' });
})();
any help would be appreciated!
If you look at both Codepen's it'd be most helpful i'm thinking.
slider 1 works great and i dont want to mess with that one as it's telling it to show a certain amount of slides per view.
Here is complete working example https://jsfiddle.net/710x569p/ As i told you in another answer don't use same selector and exclude #swiper1 from .swiper-container
var mySwiper = new Swiper('.swiper-container:not(#swiper1)'
I'm having troubles in a project where i need to use magnific-popup in combo with mixitup.
I have a grid of clickable items that starts a magnific-popup gallery if u click on them, the problem pop out when i filter those items using mixitup (mixitup adds css display property in line on the elements).
Substantially, after i've filtered some items, magnific-popup gallery still include the display none elements and i do not want this to happen.
Here's an example:
http://codepen.io/anon/pen/zrzgpN
function mfp_init() {
$('section .gallery').magnificPopup({
delegate: 'a',
type: 'image',
mainClass: 'mfp-fade',
gallery: {
enabled: true
}
});
}
// Mix it Up init
$(function(){
$('section .gallery').mixItUp();
$('section .gallery').on('mixEnd', function(){
mfp_init()
});
});
In the example, i tried to call magnific-popup only when mixitup ended the filtering, but it still detect the display none elements and put them into the gallery.
Sorry for my bad english, hope it sounds clear. Thanks for the help!
Cheers,
Michele
I am using a Cube Slider 3d plugin for a slideshow and I have it starting on 'mouseenter' using jQuery, which works fine. I want it to stop on 'mouseleave' and cannot get it to work. Been unable to find anything to guide me in the right direction. Please see the code below. It is the code I use to start. As you can see, there is an autoplay option, which I set to 'true'. Logic would tell me to set the value to false on mouseleave, but that does not work and seems a bit redundant to use cubeslider() again. I have also tried jQuery method stop() and thought about trying to use setInterval() and clearInterval() with it somehow. With using a jQuery plugin it doesn't seem like much additional jQuery/JavaScript would be needed. I could be wrong as I've been neglecting jQuery/JavaScript for another focus and probably need a refresher on many JavaScript concepts. Any help is appreciated. Thanks
$('#cubeSlide').mouseenter(function() {
$('#cubeSlide').cubeslider({
cubesNum: {rows:1, cols:1},
orientation: 'h',
autoplay: true,
autoplayInterval: 500,
perspective: 1200,
mode3d: 'auto',
arrows: false,
navigation: false,
addShadow: false,
});
});
I am willing to use the jQuery UI layout plugin (layout.jquery-dev.net) to make 2 resizable <div>. It would be just the center and east panels we can see here.
From the documentation I could make the simplest layout to work :
<script type ="text/javascript">
$(document).ready(function () {
var oOptions = {
applyDefaultStyles: true
};
$('body').layout(oOptions);
});
</script>
<body>
<div class="ui-layout-center">Center</div>
<div class="ui-layout-east">East</div>
</body>
But when I try my own thing (with both panels resizable by dragging the vertical divider), it stops working entirely.
var oOptions = {
closable: false,
resizable: true,
slidable: true,
center__minWidth: 200,
east__minSize: 200
};
I have no background in JavaScript and I might just be dumb asking here. But from what I understood when reading the <script> at the demo page (same as above), it should works fine with the resizable option only.
Using jQuery 1.9.2 did the thing.
In given below link when we refresh our page it briefly shows the expanded version before it collapses on its own. Is there a way to have it immediately be collapsed?
http://new.cgwealth.com/staff
Below are JS Code links:
http://new.cgwealth.com/pages/js/jquery-1.7.2.min.js
http://new.cgwealth.com/pages/js/accordion-jquery-ui.min.js
<script type="text/Javascript">
$(document).ready(function () {
$(".accordion").accordion({
autoHeight: false,
navigation: false,
collapsible: true,
clearStyle: true
});
});
</script>
CSS link: http://new.cgwealth.com/pages/pages/css/accordion.css
So i want to hide all the data until my accordion functionality works.
Thanks in advance
i had the same question in my last project, but i have no idea about that. Then i use a very ugly method to fix this. When i load data from my server, i add class named 'hidden'(css:display:none), and it had a effort that all data, just like text or images, all hide. And after all data loaded, i call jquery function accordion and remove class 'hidden'.
So i use this method to fix. Maybe it is valid for you.
You have to hide the content through css, and then enable the content to be show via javascript. Here is one working copy
http://jsfiddle.net/aneeshrajvj/FcHEC/