Bootstrap 3 carousel buttons on top right - javascript

I found this article Bootstrap 3 Carousel with buttons which contains the link to https://www.codeply.com/go/bp/113737.
Which is almost, and i would say exactly that im trying to do with my custom carousel.
Im trying to make a carousel which has the button on top right,
something like this
https://imgur.com/a/rBCF9kh
So as you can see there are three buttons Lumpia Longanisa and Tocino
So when the second button is clicked, Longanisa, it will toggle with new image, the same goes for Tocino and so forth, just like a normal carousel.
I'm quite new to bootstrap, and im having a hard time applying the same scenario on the post i found which seems to use an older version of bootstrap.
So if someone could lend a hand please, i would appreciate it and like how to apply the javascript or where to in case.
Or if not bootstrap carousel, maybe a different slider approach can be helpful as well.
Thank you in advance for guiding me.
I tried the one with this post Bootstrap 3 Carousel with buttons using this guide https://www.codeply.com/go/bp/113737 but im not sure if its working with the current version of bootstrap, or if im inputting the correct $('#myCarousel').carousel(); somewhere

Related

Menu dropdown not working after adding slick.js

Kindly check this page: https://cutt.ly/mDYu9Nr (I have removed the unwanted section here to make things less complicated).
After adding thumbnail carousal website top menu had stopped working.
After some digs I found out that "slick.min.js" is giving me trouble. If I removed this script menu dropdown work properly.
It will be great if someone help me in this regards. I have already spent 2 days and tried almost every solution which are on internet like adjusting JS sequence, css solution etc.

Banner slider for wordpress without plugin

I would like to include banner slider that will fit properly on my site http://wwww.virmodrosti.com index page.
I tried to insert some codes I found on the internet but somehow ruined my entire page.
Question 1: Is jQuery or CSS alone is a better choice for slider?
Question 2: Where can I get easy slider without plugin for my wordpress theme?
I need a slider to be just below the line div id="content" on the main index page. I would like to insert an 1188px wide image because my main wrapper width is 1180px. All I want is a simple slider that has option for aorund 5 posts, that will be manually setup. That's why I ask for a good PHP or HTML code that will work with my wordpress theme.
.
Can you show me a Demo, what kind of slider you want. you can use slider Revolution For a simple slider.
This is a really good basic slider. http://kenwheeler.github.io/slick/
However, if you don't know how to develop your own plugin, then you are going to struggle to figure out how to control the content of the slider. Also if you are using someone elses code, isn't that just the same as using a plugin? Using a plugin means the code will be regularly updated, whereas if you use someone elses static code, then if it breaks you won't know what to do.

About fullPage.js

I'm working with fullPage.js, an amazing scrolling framework.
I need to have the site working like this:
As you can see in the .jpg when the site loads and people click or scroll to the right using the slideshow, there are 4 slides there, when they catch the last one users can only go down. No other behavior is allow.
Now I have this working just for the horizontal line, in the following way:
People can not go back because there is no previous button.
When people get to the last horizontal slide the next button navigation disappear.
Now I need to create another section down and I need that one just works on the last slide numbered as 4 in the jpg. Not allow to pass there in the slide 1, 2 or 3.
Any ideas? How can I do that?
You could disallow the vertical scrolling until the user reach the last slide.
You could use the functions setAllowScrolling and setKeyboardScrolling provided by the plugin together with a callback such as 'afterSlideLoad'.
Thank you so much for reply. I found a solution changing the framework and working with Parallaxjs.
http://stolksdorf.github.io/Parallaxjs/
Very versatile for this purpose. !

Incorrect work jquery plugins bxslider with plugin elevatezoom

I'm begginer in programing. I'm trying to use jquery plugins elevatezoom and bxslider. And I have a little problem.
What I have
When I choose one picture from the box, which was created by bxslider plugin, as I understand, the other became invisible, but still exist at the page (in my example at the left top of the page). And when I mouseover this block, the elevate zoomer plugin understand it as a picture for zooming, and start to zoom it. As a result,the page works incorrectly.
Does anyone know how to solve this problem?
I also can give the link to the live project
Maybe you could try to add a class to the active slide object like here and then create an if statement for active slide objects only.

Mega Menu and tabs with jquery

I need to create a mega menu similar to something used for this website.
this image may give more idea about what i am trying to achieve.
So far i am not able to find anything similar to the one used on website.
I came across jQuery Tools website with nice tabs. I am trying to integrate this my menu so that i can get an impression of mega menus.
So far i am not sure how i can integrate it will my navigation and make it look somthing similar to what is show in the image above.
I tried to make changes to css so that description div will show up next to sub menu but it is not coming up right.
Help in this regard is appreciated.
MY CODE of jsFiddle
I would appreciate help in this reading.

Categories