I did a test of the slick carousel on it's own in an empty html page before integrating it into the rest of my code. It worked perfectly and the arrows were there. I copy and pasted my test code into a page with code that already existed. The carousel still worked as intended, but the arrows to toggle the images have now disappeared. I'm not sure what happened or how to fix it.
This is my code:
$(document).ready(function() {
$('.slider').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
autoplay: true,
autoplaySpeed: 5000,
});
});
#header {
height: 40px;
position: relative;
margin: 80px auto 0;
}
#header ul {
margin: 0 auto;
width: 800px;
padding: 0;
list-style: none;
}
#header ul li {
float: left;
width: 97px;
}
#header ul li:nth-of-type(4) {
margin-left: 217px;
}
#header ul li a {
text-transform: lowercase;
text-decoration: none;
display: block;
text-align: center;
padding: 12px 0 0 0;
height: 28px;
color: #000;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
#header ul li a:hover {
color: #c4c4c4;
}
.logo {
position: absolute;
left: 50%;
margin: -60px 0 0 -124px;
}
#media screen and (max-width: 800px) {
.logo {
bottom: 100%;
}
#header ul li:nth-of-type(4) {
margin-left: 0;
}
#header ul {
width: 600px;
position: relative;
}
}
ul.sub-menu {
display: none;
position: absolute;
top: 30;
left: 0;
width: auto!important;
overflow: hidden;
padding: 0 1em;
z-index: 2;
background: white;
}
.sub-menu li {
display: block;
float: none!important;
}
.more {
position: relative;
}
.more:hover .sub-menu {
display: inline-block;
}
#filler {
height: 100px;
}
.slider {
width: 750px;
margin: 20px auto;
background: white;
text-align: center;
}
.slider div img {
height: 500px;
margin: auto;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Whatever Photography</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="Content/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="slick/slick.css" />
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css" />
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div id="header">
<a class="logo">
<img src="imgs/logo.jpg" alt="Whatever Photography" height="140" width="230" />
</a>
<ul>
<li>About
</li>
<li class="more">
Galleries <span class="caret"></span>
<ul class="sub-menu">
<li>Portraits
</li>
<li>Landscapes
</li>
<li>Personal
</li>
</ul>
</li>
<li>Blog
</li>
<li>Info/Rates
</li>
<li>Prints
</li>
<li>Contact
</li>
</ul>
</div>
<div class="container">
<div class="col-md-12" id="filler">
</div>
<div class="col-md-12">
<div class="slider">
<div>
<img src="imgs/slider01.jpg" />
</div>
<div>
<img src="imgs/slider02.jpg" />
</div>
<div>
<img src="imgs/slider03.jpg" />
</div>
<div>
<img src="imgs/slider04.jpg" />
</div>
<div>
<img src="imgs/slider05.jpg" />
</div>
<div>
<img src="imgs/slider06.jpg" />
</div>
<div>
<img src="imgs/slider07.jpg" />
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>
I figured it out. I had the carousel set to a white background and the arrows/dots are colored white by default hence the "disappearance," so I just have to go in and restyle the colors....
You 2 time Add jquery-1.11.0.min.js
one more thing first load jquery library file
Demo link https://jsfiddle.net/a9g1bum6/1/
Related
I have a problem where I have a lot of items I want to fit in my website's bottom banner, but when I try adding them they get messed up because of how I spaced them, now I really just want to know how I can fix this and what a good way could be for not doing this in any of my future projects. Here is an example of what I want:
I want to make the text in the center go left towards the icons and I want the pictures at the bottom left to go to the center-right. I tried messing with this before but the banner always became smaller or the images would get messed up and other things like that. Here is the code of my website:
<!DOCTYPE html>
<html>
<head>
<title>FAQ</title>
<!-- Novo Sans Font -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght#300&display=swap" rel="stylesheet">
<!-- Crimson Text Font -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght#1,600&display=swap" rel="stylesheet">
<!-- Architect's Daughter Font -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap" rel="stylesheet">
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
text-align: center;
}
.arrow {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
.indicator {
margin-right: 50px;
float: left;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transition: 0.2s ease transform;
}
.collapsible {
color: black;
cursor: pointer;
padding: 18px;
width: 100%;
border: solid thin;
text-align: left;
outline: none;
font-size: 15px;
}
.collapsible.active .indicator {
transform: rotate(45deg);
}
.active, .collapsible:hover {
background-color: #555;
}
.collapsible:after {
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
}
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
#div2 {
width: 100vw;
position: relative;
margin-top: 290px;
margin-left: -50vw;
height: 100%;
left: 50%;
background-color: rgb(173, 12, 7);
padding-top: 50px;
padding-bottom: 120px;
}
.contactInfo {
text-align: center;
color: white;
}
#cInfo {
padding-right: 1px;
}
#phoneInfo {
margin-top: 55px;
margin-right: 300px;
}
#phoneIcon {
float: left;
margin-top: 30px;
margin-left: 100px;
}
#emailInfo {
margin-top: 55px;
margin-right: 200px;
}
#emailIcon {
float: left;
margin-top: 30px;
margin-left: 100px;
}
#farmer {
float: left;
}
#littleShop {
float: left;
}
</style>
<body>
<div class="logo"><img src="CSS/logo.jpg" id="logo" width="250" height="150"></div>
<nav>
<div style="width: 750px; margin: 0 auto;">
<div id="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact us</li>
<li>Store</li>
<li>FAQ</li>
</ul>
</div>
</div>
</nav>
<link rel="stylesheet" type="text/css" href="CSS/faq.css">
<link rel="stylesheet" type="text/css" href="CSS/new_main_css.css">
<h1>FAQ</h1>
<button class="collapsible" data-toggle=""><b>Questions and Answers</b><i class="arrow indicator"></i></button>
<div class="content">
<p>Lorem Ipsum</p>
</div>
<div id="div2">
<h1 class="contactInfo" id="cInfo">Contact information</h1>
<img src="CSS/phoneIconNew.png" width="40" height="40" id="phoneIcon">
<h2 class="contactInfo" id="phoneInfo">Business Contact: 072 000 000 0000</h2>
<img src="CSS/emailIconNew.png" width="40" height="40" id="emailIcon">
<h2 class="contactInfo" id="emailInfo">Busienss Email: exampleemail#example.com</h2>
<img src="CSS/littleshopnew.jpg" id="littleShop">
<img src="CSS/farmer.png" id="farmer">
</div>
</body>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
</html>
JSfiddle link: https://jsfiddle.net/5309uzrd/
I have changed div2 from block to flex
Css
#div2 {
width: 100vw;
position: relative;
margin-top: 290px;
margin-left: -50vw;
height: 100%;
left: 50%;
background-color: rgb(173, 12, 7);
padding-top: 50px;
padding-bottom: 120px;
display: flex;
justify-content: space-between;
flex-flow: row wrap;
}
#div2 .container{
width: 50%;
}
.contactInfo {
width: 100%;
text-align: center;
color: white;
}
Html
<div id="div2">
<h1 class="contactInfo" id="cInfo">Contact information</h1>
<div class="container">
<img src="CSS/phoneIconNew.png" width="40" height="40" id="phoneIcon">
<h2 class="contactInfo" id="phoneInfo">Business Contact: 072 000 000 0000</h2>
<img src="CSS/emailIconNew.png" width="40" height="40" id="emailIcon">
<h2 class="contactInfo" id="emailInfo">Busienss Email: exampleemail#example.com</h2>
</div>
<div class="container">
<img src="CSS/littleshopnew.jpg" id="littleShop">
<img src="CSS/farmer.png" id="farmer">
</div>
</div>
Hi I've been trying to troubleshoot this on my own but I already spent too many hours trying to figure it out. I couldn't add the images because idk how to on here but if someone could help me please. Or at least guide me in the right direction. My main.js is in a folder called js. My styles.css and html don't have folders but they seem to be working fine cause I know that matters as well.
function menuToggle() {
var MenuItems = document.getElementById("MenuItems");
MenuItems.style.maxHeight = "0px";
if (MenuItems.style.maxHeight == "0px") {
MenuItems.style.maxHeight = "200px";
} else {
MenuItems.style.maxHeight = "0px";
}
}
.menu-icon {
width: 28px;
margin-left: 20px;
display: none;
}
/*--- media query for menu ---*/
#media only screen and (max-width: 800px) {
nav ul {
position: absolute;
top: 70px;
left: 0;
background: #333;
width: 100%;
overflow: hidden;
transition: max-height 0.5s;
}
nav ul li {
display: block;
margin-right: 50px;
margin-top: 10px;
margin-bottom: 10px;
}
nav ul li a {
color: #fff;
}
.menu-icon {
display: block;
cursor: pointer;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gucci</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Assistant:wght#200;800&display=swap" rel="stylesheet">
<script src="js/main.js"></script>
</head>
<body>
<div class="header">
<div class="container">
<div class="navbar">
<div class="logo">
<img src="images/logogucci.png" width="125px">
</div>
<nav>
<ul id="MenuItems">
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>Contact</li>
<li>Account</li>
</ul>
</nav>
<img src="images/carticon.png" width="30px" height="30px">
<img src="images/hamburger-menu-icon-transparent-1.jpg" class="menu-icon" onclick="menuToggle()">
</div>
The problem with your toggle function is that you're setting the height to 0px every time you toggle
You need to remove this line:
MenuItems.style.maxHeight = "0px";
function menuToggle() {
var MenuItems = document.getElementById("MenuItems");
if (MenuItems.style.maxHeight == "0px") {
MenuItems.style.maxHeight = "200px";
} else {
MenuItems.style.maxHeight = "0px";
}
}
.menu-icon {
width: 28px;
margin-left: 20px;
display: none;
}
/*--- media query for menu ---*/
#media only screen and (max-width: 800px) {
nav ul {
position: absolute;
top: 70px;
left: 0;
background: #333;
width: 100%;
overflow: hidden;
transition: max-height 0.5s;
}
nav ul li {
display: block;
margin-right: 50px;
margin-top: 10px;
margin-bottom: 10px;
}
nav ul li a {
color: #fff;
}
.menu-icon {
display: block;
cursor: pointer;
}
}
<div class="header">
<div class="container">
<div class="navbar">
<div class="logo">
<img src="images/logogucci.png" width="125px">
</div>
<nav>
<ul id="MenuItems">
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>Contact</li>
<li>Account</li>
</ul>
</nav>
<img src="images/carticon.png" width="30px" height="30px">
<img src="images/hamburger-menu-icon-transparent-1.jpg" class="menu-icon" onclick="menuToggle()">
I have implemented Slick.js to mine project but for some reason when I use nextArrow and prevArrow my picture gets cropped to around 60% of the width, I have tried to make a custom class which deffiness a width of 100% but that didn't solve the problem. Just checked only prevArrow causes a problem
Here is how it should look like:
Here is how it looks like:
$('.slider-one').not(".slick-initialized").slick({
autoplay: true,
autoplaySpeed: 3000,
dots: true,
prevArrow: ".site-slider .slider-btn .prev",
nextArrow: ".site-slider .slider-btn .next"
});
.wid {
width: 100% !important;
height: 500px;
}
/*Slider*/
.site-sider {
position: relative;
}
.position-top {
position: absolute;
top: 45%;
}
.site-slider .slider-btn .prev,
.site-slider .slider-btn .next {
background-color: #091a5d;
padding: 1rem 1.5rem;
border-radius: 50%;
color: white;
margin: 0 1rem;
opacity: 0;
transition: opacity 1s ease;
}
.site-slider:hover .slider-btn .prev,
.site-slider:hover .slider-btn .next {
opacity: 0.9;
}
.right-0 {
right: 0;
}
.slick-dots {
left:50%;
display: flex;
justify-content: center;
margin: 0;
padding: 16px 0;
list-style-type: none;
position: absolute;
bottom: 0;
right: 50%;
}
.slick-dots li {
margin: 0 0.6rem;
}
.slick-dots button {
display: block;
width: 8px;
height: 8px;
padding: 0;
border: none;
background-color: white;
text-indent: -99999px;
border-radius: 100%;
}
.slick-dots .slick-active button {
transform: scale(2.5);
box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, 0.205);
}
<!DOCTYPE html>
<html lang="en">
<head>
<!--Font-->
<script src="https://kit.fontawesome.com/158e82d513.js" crossorigin="anonymous"></script>
<!--Slider-->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css" />
<!--Styles-->
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<main>
<!--Slider-->
<div class="container-fluid p-0">
<div class="site-slider">
<div class="slider-one">
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png" class="wid img-fluid" alt="Slika 1">
</div>
<div>
<img src="https://www.talkwalker.com/images/2020/blog-headers/image-analysis.png" class="wid img-fluid" alt="Slika 2">
</div>
<div>
<img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" class="wid img-fluid" alt="Slika 3">
</div>
</div>
<div class="slider-btn">
<span class="prev position-top"><i class="fas fa-chevron-left"></i></span>
<span class="next position-top right-0"><i class="fas fa-chevron-right"></i></span>
</div>
</div>
</div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<script src="js/main.js"></script>
</body>
So if anyone knows how to solve this, help a brother out :) <3
Instead of class use image directly
$('.slider-one').not(".slick-initialized").slick({
prevArrow:"<img class='a-left control-c prev slick-prev' src='../images/shoe_story/arrow-left.png'>",
nextArrow:"<img class='a-right control-c next slick-next' src='../images/shoe_story/arrow-right.png'>" });
If Your are using bootstrap 3 Use this
.slick-prev:before, .slick-next:before {
font-family: "Glyphicons Halflings","slick", sans-serif;
font-size: 40px;
}
.slick-prev:before { content: "\e257"; }
.slick-next:before { content: "\e258"; }
I want to create a menu like http://www.barangaroo.com/
I have opened the overlay section when click on the humburger menu icon.It worked as i expected.
But for the search option, It doesn't close when closing the overlay.
Here is the code from jsfiddle
https://jsfiddle.net/g7pe9uw6/11/
jQuery(function($) {
'use strict';
$('#toggle').click(function () {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
});
$('.icon').on('click',function(e){
e.preventDefault();
$('#toggle').addClass('active');
$('#overlay').addClass('open');
$('.search').addClass('expanded');
});
$('.button__container__icon.active').click(function () {
$('.search').removeClass('expanded');
});
}); // JQuery end
header {
height: 400px;
background: rgba(0,0,0,.5);
}
header .header__menu__list li {
display: inline-block;
}
header .header__menu__list li .header__menu__list__search {
display: block;
padding: 0 25px;
}
header .header__menu__list li .header__menu__list__search i {
font-size: 40px;
}
header .header__menu__list .brand img {
margin-top: -30px;
}
.button__container {
position: fixed;
top: 70px;
left: 70px;
float: left;
width: 100%;
height: 27px;
cursor: pointer;
z-index: 100;
transition: opacity .25s ease;
}
.button__container:hover {
opacity: 1;
}
.button__container__icon {
width: 35px;
height: 27px;
float: left;
position: relative;
}
.button__container__icon.active .top {
transform: translateY(11px) translateX(0) rotate(45deg);
background: #fff;
}
.button__container__icon.active .middle {
opacity: 0;
background: #fff;
}
.button__container__icon.active .bottom {
transform: translateY(-11px) translateX(0) rotate(-45deg);
background: #fff;
}
.button__container span {
background: #fff;
border: none;
height: 2px;
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: all .35s ease;
cursor: pointer;
}
.button__container span:nth-of-type(2) {
top: 10px;
}
.button__container span:nth-of-type(3) {
top: 20px;
}
.overlay {
position: fixed;
background: #000;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
opacity: 0;
visibility: hidden;
transition: opacity .35s,visibility .35s;
overflow: hidden;
}
.overlay.open {
opacity: 1;
visibility: visible;
overflow: auto;
}
.overlay.open li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
animation-delay: .50s;
}
.overlay .overlay-menu {
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
font-size: 50px;
font-weight: 400;
text-align: center;
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay ul li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay ul li a {
display: block;
position: relative;
color: #FFF;
text-decoration: none;
overflow: hidden;
}
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
width: 100%;
}
.overlay ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: #FFF;
transition: .35s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
.box {
position: relative;
width: 220px;
}
.search {
width: 200px;
max-width: 0;
padding: 5px;
transition: all .5s ease;
position: absolute;
right: 20px;
box-sizing: border-box;
opacity: 0;
}
.search.expanded {
max-width: 200px;
opacity: 1;
}
.icon {
width: 20px;
height: 20px;
background: red;
position: absolute;
right: 0;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="src/css/app.css">
<title>Hello, world!</title>
</head>
<body>
<div id="app">
<header>
<div class="header__menu">
<div class="container">
<div class="header__menu_icon">
<div class="button__container">
<div class="button__container__icon" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<ul class="header__menu__list">
<li>
<!-- <form action="#">
<a href="#" class="header__menu__list__search" id="search-toggle">
<i class="fa fa-search"></i>
</a>
<input type="text">
</form> -->
<div class="box">
<input class="search" type="search" placeholder="Search" />
<div class="icon">s</div>
</div>
</li>
<li>
<a href="#" class="brand">
<img src="http://via.placeholder.com/176x40" alt="" class="img-fluid">
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- header__menu -->
</header>
<div class="overlay" id="overlay">
<div class="overlay-menu">
<div class="container">
<div class="row">
<div class="col-md-4">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Work
</li>
<li>
Contact
</li>
</ul>
</div>
<div class="col-md-4">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Work
</li>
<li>
Contact
</li>
</ul>
</div>
<div class="col-md-4">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Work
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="src/js/app.js"></script>
</body>
</html>
Can you please help me to fix the function?
Thanks
Check below js fiddle with your issue resolved if that's what you were looking for
https://jsfiddle.net/g7pe9uw6/27/
You just needed to remove "expanded: class from search box to close it.
$('#toggle').click(function () {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
$('.search').removeClass('expanded');
});
Not the nicest solution, but it is working :D
Edited
jQuery(function($) {
'use strict';
$('#toggle').click(function () {
var dat = $(this).data('from');
$(this).toggleClass('active');
if (typeof dat === 'undefined') {
$('#overlay').toggleClass('open');
} else {
$('.search').toggleClass('expanded');
}
$(this).removeData('from');
});
$('.icon').on('click',function(e){
e.preventDefault();
var toggleOpened = $('#toggle').hasClass('active');
var dat = $('#toggle').data('from');
if (!toggleOpened) {
$('#toggle').toggleClass('active');
}
if (typeof dat === 'undefined') {
$('#toggle').data('from', 'search');
} else {
$('#toggle').removeData('from');
}
$('#overlay').removeClass('open');
$('.search').toggleClass('expanded');
});
$('.button__container__icon.active').click(function () {
$('.search').removeClass('expanded');
});
}); // JQuery end
Carousel's image is bigger I expected.
My Code
* {
margin: 0;
padding: 0;
}
.menu {
background-color: gray;
width: 500px;
height: 100%;
float: left;
}
.title {
color: white;
font-size: 30px;
margin: 0px 5px;
margin-left: 40px;
text-align: center;
}
.first {
padding-top: 30px;
}
html,
body,
.menu {
height: 100%;
}
body {
margin: 0;
}
.relative {
position: relative;
}
li {
list-style: none;
}
li a {
display: block;
text-decoration: none;
color: white;
text-align: center;
font-size: 20px;
}
li a img {
width: 100%;
height: 100%;
}
.float-right {
width: calc(100% - 500px);
overflow: hidden;
float: right;
}
<link rel="stylesheet" href="home.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="menu" id="menu">
<h2 class="title first">SITE</h2>
<ul class="">
<li><a class="home" href="">Home</a></li>
<li><a class="profile" href="">Detail</a></li>
</ul>
</div>
<div class="imgArea float-right" id="carousel">
<ul>
<li><img src="photo1.jpg" alt=""></li>
<li><img src="photo2.jpg" alt=""></li>
</ul>
</div>
<script src="carousel.js"></script>
when I run this web site,carousel's image is bigger than the original image like yellow arrow in picture.(It does not show image...)
I wanna put carousel in browser remaining of area of and carousel's image's size is adjusted 100% in the area.
So I really cannot understand why carousel's image is zoomed.When I wrote in html like <a href="#"><img src="photo1.jpg" width="100px" height="100px" alt=""> same situation happens.
In the css you have provided:
li a img{
width: 100%;
height: 100%;}
you need to change it too
li a img{
width: 100px;
height: 100px;}
Also as you are already using bootstrap u may want to look into bootstrap's carousel https://www.w3schools.com/bootstrap/bootstrap_carousel.asp
ul {
list-style: none;
margin: 0;
padding: 0;
}
.main-container {
width: 100%;
float: left;
}
.header {
float: left;
width: 100%;
}
.sidebar {
float: left;
width: 20%;
height: 100%;
}
.imgArea {
float: left;
width: 75%;
height: 100%;
}
<body>
<div class="main-container">
<div class="header">SITE</div>
<div class="sidebar" id="menu">
<ul class="sidebar-ul">
<li><a class="home" href="">Home</a>
</li>
<li><a class="profile" href="">Detail</a>
</li>
</ul>
</div>
<div class="imgArea" id="carousel">
<ul class="carousel-ul">
<li>
<img src="http://lorempixel.com/400/200" alt="" />
</li>
<li>
<img src="http://lorempixel.com/400/200" alt="" />
</li>
</ul>
</div>
</div>
<script src="carousel.js"></script>
</body>
Right now i dont have your carousel.js so i hope this will work.