Search jQuery

jQuery Forum

Responsive Carousel jQuery & CSS

in Using jQuery • 6 years ago

I've been working on this carousel for a few weeks now and about to quit. I've played with flex and css without any luck. I am hoping someone can tell me how to get this to reduce as the display reduces.

I found I can reduce the number of slides displayed, e.g. start at 7 then to 5, then to 3 and then 1 is how I think it will go.

However, I haven't created a site for a few years and I thought I could call these variants based on the display size. I was trying to call the different sizes for the js too.

I'm also confused on how to call one css for all the pages and just load css for medium and small sizes which would call essential differences for each size.

Any help would be appreciated, or I would like to find someone to hire. I am a newbie with jQuery.

Here is what I have so far: http://web-mtg.com/test/carousel.html

Replies(10)

jakecigar

Re: Responsive Carousel jQuery & CSS

6 years ago

You picked the wrong carousel. It runs with an ANCIENT version of jQuery. Since you purchased it, you should contact the author for support.

JΛ̊KE

learning2

Re: Responsive Carousel jQuery & CSS

6 years ago

Unable to contact the composer. I don't have a clue on how to write this myself...

jakecigar

Re: Responsive Carousel jQuery & CSS

6 years ago

There are other plugins that do similar. And most of them are free.

themekiosk | CodeCanyon Is the author.

Unfortunately It says… High Resolution: No, Compatible Browsers: IE7, IE8, IE9, Firefox, Safari, Opera, Chrome.

It is so old, that it probably does not work well with current IE or Edge or mobile devices.

JΛ̊KE

learning2

Re: Responsive Carousel jQuery & CSS

6 years ago

I can see it on a mobile but the sliders are not adjusting based on my skills thus far.

jakecigar

Re: Responsive Carousel jQuery & CSS

6 years ago

There is nothing in that plugin that could be called "responsive". Enjoy the pain. It won’t get any easier until you discard that old code and find a new plugin.

JΛ̊KE

learning2

Re: Responsive Carousel jQuery & CSS

6 years ago

Thank you for your help. I've searched for a few days and didn't find anything. That's why I was looking for help. Thanks for your efforts.

learning2

Re: Responsive Carousel jQuery & CSS

6 years ago

I am looking to get some help on this old, old jQuery. I know its old. I know it may have issues with all the high resolutions.

I am looking for some help to get this responsive for different device screens.

jakecigar

Re: Responsive Carousel jQuery & CSS

6 years ago

Since the plugin does not do "responsive", you can play with CSS zoom or transformscale.

<script>
$(window).resize(function(){
var width = $(window).width();
var zoom =
width<=320?.2:
width<=420?.3:
width<=800?.4:
width<=1000?.5:
width<=1200?.6:
width<=1600?.8:
1;
$(".carousel").css("transform","scale("+zoom+")");
})
$(function() {
$('.carousel').carousel({
hAlign: 'center',
vAlign: 'center',
hMargin: 0.4,
speed: 500,
shadow: true,
directionNav: true,
reflection: false,
buttonNav: 'bullets',
pauseOnHover: true,
description: true,
descriptionContainer: '.description'
});
$(window).resize()
});
</script>

You can change the numbers around until you are happy. But it is not going to be as good as a plugin that does the nasty code for you, or will it intelligently download smaller versions of the image for smaller devices.

JΛ̊KE

jakecigar

Re: Re: Responsive Carousel jQuery & CSS

6 years ago

You should use

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>

instead of your ancient version of jQuery!

JΛ̊KE

learning2

Re: Responsive Carousel jQuery & CSS

6 years ago

Hey Jake,

I'll try the code and new jquery today, though I did find some new projects since I was looking for the links below to let you know about my progress, or lack of. So, I will try these before looking at your code suggestions. Seems you were right about new packages. Funny how I didn't find them earlier, guess I have to work on my search skills.

I did find a couple of newer jquery menus before today, but I'm not knowledgeable about how to use these packages and builders yet - and time is running out for me on this project. This project is for my partner. I want to create a classy, interesting site for him, helpefully with some good results for calls to actions for purchases...Since I lack the knowledge for using the builders, I have to code using note++.

Here is another program or two I did find:

http://coverflowjs.github.io/coverflow/
https://github.com/specious/cloud9carousel

The last one I just found this morning via the original github readme file of the cloud9. I may take a peek at the last one before I try your solutions. I wish I had the time or, knew I had time, to learn how to use these packages and jQuery et al.

I do appreciate your replies and comments, though I was really very, very frustrated and feeling like I don't know anything about html since sitting out these past few years.

THANK YOU JAKE!! Wish I could hire you as a remote teacher! Thank you!

Top Reply

Response title

Attachments

jQuery Forum

Responsive Carousel jQuery & CSS

Replies(10)

Re: Responsive Carousel jQuery & CSS

Re: Responsive Carousel jQuery & CSS

Re: Responsive Carousel jQuery & CSS

Re: Responsive Carousel jQuery & CSS

Re: Responsive Carousel jQuery & CSS

Re: Responsive Carousel jQuery & CSS

Re: Responsive Carousel jQuery & CSS

Re: Responsive Carousel jQuery & CSS

Re: Re: Responsive Carousel jQuery & CSS

Re: Responsive Carousel jQuery & CSS

Statistics

Tags

Actions