Slick Carousel doesn't appear on Boostrap page - javascript

So I am kinda stuck with this Slick Carousel. It works great out of the box by itself, but when I try to incorporate it with my webpage, it just doesn't seem to show anything at all. I have no idea what is conflicting here. I tried to replicate it on CodePen and it works just fine, but not on my webpage. I have provided both the urls for your reference. Could any of you help me with this?
CodePen - https://codepen.io/jesse-alex/pen/jONpOrE
My Webpage - https://jessealex.com/test/test.html
(I have stripped the webpage of all other elements but the carousel)
Thanks a ton again :)

It was a silly mistake... here are the fix
The element should be <link> rather than <script> as Tom Berghuis suggested.
Forgot to define the type="text/css"

Related

Wordpress HTML/CSS not displaying correctly - no changes made

I am having trouble identifying a problem and it is driving me crazy. If this is a poor question or in the wrong place please have mercy, I am exhausted trying to figure this out.
Here is how my website is displaying: My Site
And here is how it is supposed to look:
Archive of Page
Nothing has changed as far as I can tell. I have disabled plugins, re-uploaded them there. My mind is boggled!? It looks the same (code) but appears different. What am I missing!?
I happened to get this as well, what you should do is to redownload the layout, thats what solved my issue. I remember adding 1 line to css and removing it, the layout got stuck and refused to update, so that was my solution. I hope someone else can give you a better one though :)
you have a problem with jQuery in your website.
I think you need to update your theme.
your theme is from 6/2014 and now is 6/2016...
Your js makes all this section on home vertical align to middle. And the js doesn't work now and stay on top.
Update your theme :)

Bootstrap data toggle tab activate bootply libraries

First of all, it's my first post and I'm still kinda newbie but I'm keen on learning more and more.
I checked out this before I decided to ask here because I kinda got stucked.
So here is example of the code:
http://www.bootply.com/C1Xu5M0RnP
It works how I wanted it to do so but if I put it into my code and trying to test it locally I got some problems. Switching tabs by clicking on tabs work perfect, but when I try to click on the link which should move me to another tab it doesn't do so. I see the link + '#profile' or '#home' but tab and content don't show.
I don't have any errors at console debug. I included scripts in a way, a lot of people suggested here - jquery first, bootstrap after.
The question is what am I doing wrong or what libraries are preloaded on bootply?
I would be really grateful for any advices.
Seems like it works now. The problem was that I was using my own script first, then I was loading jquery and bootstrap.

JQuery carousel and template doesn't work together

First of all, I'm sorry if this is already asked. I couldn't find a answer.
I have a HTML5 template bought at themeforest and a jQuery carousel. I am not very similar with JavaScript or JQuery.
When I wanted to implement the carousel like it said in the description the JQuery/Javascript didn't work.
I found out that it could be the version of JQuery. The template(cleanstart) uses version 1.11.2 and the carousel uses 1.44.4. When I changed the carousel to that version it didn't work. When I changed the template version to 1.44.4, it didn't work either.
Then I've put the text from the carousel.js in a script tag in the HTML, and that seemed to work but then the templates jQuery didn't work...
Do you have any idea what the problem can be? Maybe a variable with the same name? I really don't know how to solve it.
Help is much appreciated!
With just this Information, It's pretty hard to help you. It could be a problem with your Implementation, a compatibility Issue or many things else.
Do you have a public page where the template and the carousel are implemented? Does the console window give you any error (if you don't have it yet, I recomend you to get Firefox and the addons Firebug and Webdeveloper Toolbar).
I have found my problem. it was a scroll section that causes the other jquery to stop. When I removed that part of the code, nothing bad with the carousel happened and the other parts worked fine!

CSS/Javascript - Div removing itself from Page

I'm currently putting together a website for a buddy and myself. I purchased a template (mind all the silly placeholders and obvious space issues) to help get the ball rolling as I didn't have very much time available to put in to the project.
On the store section of the page you have that little gallery of products, when you scroll down a bit more it removes itself from the page (page jitters, clicking from store to about works funny). This is causing an issue with my Jquery waypoints setup. I can't for the life of me figure out what's removing it from the page when I'd like to keep it there at all times.
Any help is appreciated.
http://lovedrugfrontend.herokuapp.com/
For quick fix you can try to give the
style = "display:block!important";
to the 'team' class.
This will solve your issue.
This is just quick fix. Cant fix the issue without js files.

foundation section tabs not working properly

I am having an issue with foundation 4 section tabs. I copy pasted the example code to my local and tested it and it doesnt show up.
I also modified it and added some height elements to make it display properly but still I can only view on tab and clicking it doesnt actually open up the content.
I have included jquery foundation.css and foundation.min.js and also zepto.js without any luck.
If anyone could tell me what i might be doing wrong or if there is an issue with the framework that would be great.
Thanks.
Please close this.
I fixed the problem by adding a foundation at document load. :)
Cheers hope this helps someone in need.
$(document).foundation(); Thats the code I added right at the start of document.ready.

Categories