Removing Small White Space Under Footer - html

I've been searching around for a solution to the small sliver of white space which has appeared below my footer but nothing seems to work. I've tried manipulating margin-bottom and padding-bottom to no avail.
The website with the footer is located here: website
The footer in question has a class name of "footerWrapper" and i hope that using the browser DOM editor will give you a better picture of the situation then if i just posted incomplete code. I have tried for a long time to fix this and any suggestions are greatly appreciated.
EDIT: Added code below (I PHP 'included' alot of code, including my footer which created weird formatting. Could this be my problem?)
<body class="body1">
<div class="borderLine"></div>
<div class="banner"></div>
<div class="mainContent1">
<div class="header1">
<div class="headerContainer">
<div class="headerPanelOuter">
<div class="headerPanel">
<p class="panelWelcome">Welcome,
log in or sign up! </p>
<div class="panelButton" id="logInBut">
<span>log in</span>
</div>
<form name="LogOutForm" id="LogOutForm" method="post" action="/app/newstuff.php" style="z-index: 5;">
<div class="panelButton" style="top: 34px;" onclick="SubmitLogOutForm()">
<span>log out</span>
</div>
<input name="LogOutState" type="hidden" value="1">
</form>
<div class="panelButton" onclick="location.href='signup.php';" style="top: 64px;">
<span>sign up</span>
</div>
<div class="panelButton" onclick="location.href='useraccount.php';" style="left: 4px; width: 90px;">
<span>my account</span>
</div>
</div>
</div>
<img class="KELogo" src="/../../images/PRLogo(header).png" alt="Logo">
<img class="KETitleLogo" src="/../../images/KENameLogo(header32).png" alt="People\'s Robotics">
<div id="blackBackg" style="display: none;"></div>
<div id="LogInBox" style="display: none;">
<p id="logEscape" onclick="">x</p>
<p id="logInTitle">Log In</p>
<div id="linediv2"></div>
<form name="logInForm" id="logInForm" method="post" action="/app/newstuff.php" style="z-index: 5;">
<span id="emailField">E-mail:</span>
<br><input id="logEmail" type="text" style="height: 28px;" name="logEmail" value="" onfocus="inputFocus(this)" onblur="inputBlur(this)"> <br><br>
<span id="passField">Password:</span> <br>
<input id="logPass" type="password" style="height: 28px;" name="logPass" value="" onfocus="inputFocus(this)" onblur="inputBlur(this)"> <br><br>
<input id="logSubmit" type="submit" name="logSubmit" value="Log In">
</form>
</div>
<ul class="navList1">
<li><a id="B0" href="/app/newstuff.php" style="background-color: rgb(30, 96, 217); color: rgb(249, 249, 249);">New Stuff</a></li>
<li><a id="B1" href="/app/products.php">Products</a></li>
<li><a id="B2" href="/app/projects.php">Projects</a></li>
<li><a id="B3" href="/app/faq.php">FAQ</a></li>
<li><a id="B4" href="/app/cart.php">My Cart</a></li>
</ul>
</div>
</div>
<div class="content1">
<div id="NSDiv1">
<div id="NSContentContainer">
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; display: block; z-index: 2;" class="flex-active-slide" data-thumb-alt="">
<img src="/images/sh3.jpg" alt="1" draggable="false">
</li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;" data-thumb-alt="">
<img class="lazy" data-src="/images/sh1.jpg" alt="2" draggable="false" src="/images/sh1.jpg">
</li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;" data-thumb-alt="">
<img class="lazy" data-src="/images/sh2.jpg" alt="3" draggable="false">
</li>
</ul>
<ol class="flex-control-nav flex-control-paging"><li>1</li><li>2</li><li>3</li></ol><ul class="flex-direction-nav"><li class="flex-nav-prev"><a class="flex-prev" href="#">Previous</a></li><li class="flex-nav-next"><a class="flex-next" href="#">Next</a></li></ul></div>
</section>
</div>
<div id="NSContentContainer" style=" top: 45px; left: 13px; width: 525px; height: 250px;z-index: 6;">
</div>
</div>
<!-------------------- DIV2----------------- -->
<div id="NSDiv2">
<div id="NSContentContainer" style="height: 250px;">
</div>
<div id="NSContentContainer" style=" top: 45px; left: 13px; width: 525px; height: 400px; ">
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; display: block; z-index: 2;" class="flex-active-slide" data-thumb-alt="">
<img src="/images/sh2.jpg" alt="1" draggable="false">
</li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;" data-thumb-alt="">
<img class="lazy" data-src="/images/sh3.jpg" alt="2" draggable="false" src="/images/sh3.jpg">
</li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;" data-thumb-alt="">
<img class="lazy" data-src="/images/sh1.jpg" alt="3" draggable="false">
</li>
</ul>
<ol class="flex-control-nav flex-control-paging"><li>1</li><li>2</li><li>3</li></ol><ul class="flex-direction-nav"><li class="flex-nav-prev"><a class="flex-prev" href="#">Previous</a></li><li class="flex-nav-next"><a class="flex-next" href="#">Next</a></li></ul></div>
</section>
</div>
</div>
</div>
</div>
<div class="footerWrapper">
<div class="footerInnerContainer">
<div id="footerSection1">
<img id="smlFB" src="/../../images/trans.png" alt="logo">
<img id="smlTW" src="/../../images/trans.png" alt="logo">
<img id="smlIN" src="/../../images/trans.png" alt="logo">
<img id="smlYT" src="/../../images/trans.png" alt="logo">
<div id="fsm1">
</div><div id="fsm2">
</div><div id="fsm3">
</div>
</div><div id="footerSection2">
<!-- <img src="/../../images/mysterychest1.jpg" alt="0" style="position: absolute; left: 25px; top: 13px;">
<img src="/../../images/mysterychest(top2).png" alt="0" style="position: absolute; left: 25px; top: 4px;">-->
<!-- <span style="position: absolute; top: 175px; left: 100px; font-size: 16px;">Hobbiests serving Hobbiests</span>-->
</div><div id="footerSection3">
<form>
<span>Something to say?</span>
<textarea rows="5" cols="30" name="userMessage"> </textarea>
<span>Topic:</span>
<select>
<option>Bug report</option>
<option>Suggestions</option>
<option>Other</option>
</select>
<span>Email Address:</span>
<input type="text" name="UserEmail">
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
<link rel="stylesheet" href="/../FlexSlider/flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="/../FlexSlider/jquery.flexslider-min.js"></script>
<script>
$(window).load(function () {
$('.flexslider').flexslider({
touch: true,
slideshow: true,
controlNav: true,
directionNav : true,
slideshowSpeed: 6000,
animationSpeed: 600,
initDelay: 0,
pauseOnAction: true,
start: function(slider) { // fires when the slider loads the first slide
var slide_count = slider.count - 1;
$('.slides').on('click', function () {
$(this).siblings('.flex-direction-nav').children('li').children('a.flex-next').trigger('click');
});
$(slider)
.find('img.lazy:eq(0)')
.each(function() {
var src = $(this).attr('data-src');
$(this).attr('src', src).removeProp('data-src');
});
},
before: function (slider) { // fires asynchronously with each slider animation
var slides = slider.slides,
index = slider.animatingTo,
$slide = $(slides[index]),
$img = $slide.find('img[data-src]'),
current = index,
nxt_slide = current + 1,
prev_slide = current - 1;
$slide
.parent()
.find('img.lazy:eq(' + current + '), img.lazy:eq(' + prev_slide + '), img.lazy:eq(' + nxt_slide + ')')
.each(function () {
var src = $(this).attr('data-src');
$(this).attr('src', src).removeProp('data-src');
});
},
// default setting
after: function(slider) {
/* auto-restart player if paused after action */
if (!slider.playing) {
slider.play();
}
}
});
});
</script>
<script>
function checkUrl(url) {
switch (url) {
case "":
return 1;
break;
case "newstuff.php": //REMOVE THIS AFTER
return 1;
break;
case "products.php":
return 2;
break;
case "projects.php":
return 3;
break;
case "faq.php":
return 4;
break;
case "cart.php":
return 5;
break;
}
}
$(document).ready(function () {
var array = window.location.pathname.split('/');
var lastsegment = array[array.length - 1];
$("ul.navList1 > li:nth-child(" + checkUrl(lastsegment) + ") > a").css({ "background-color": "#1E60D9", "color": "#f9f9f9" });
$("#logInBut").click(function () {
$("#LogInBox").fadeIn(1000);
$("#blackBackg").fadeIn(1000);
});
$("#blackBackg").click(function () {
$("#LogInBox").fadeOut(1000);
$("#blackBackg").fadeOut(1000);
});
$("#logEscape").click(function () {
$("#LogInBox").fadeOut(1000);
$("#blackBackg").fadeOut(1000);
});
$(".panelButton").mouseenter(function () {
$("span", this).css("color", "#f9f9f9");
$(this).css("background-color", "transparent");
});
$(".panelButton").mouseleave(function () {
$("span", this).css("color", "#222423");
$(this).css("background-color", "#f9f9f9");
});
$("ul.navList1 > li").mouseenter(function () {
$("a", this).css({ "background-color": "#1B4DA9", "color": "#f9f9f9" }); //#1B4DA9 , #001E56
});
$("ul.navList1 > li").mouseleave(function () {
$("a", this).css({ "background-color": "transparent", "color": "#1e1e1e" });
var array = window.location.pathname.split('/');
var lastsegment = array[array.length - 1];
$("ul.navList1 > li:nth-child(" + checkUrl(lastsegment) + ") > a").css({ "background-color": "#1E60D9", "color": "#f9f9f9" });
});
});
function navButtonHighlight() {
var url = window.location.pathname;
if (url == "/Template.php") {
document.getElementById("LogOutForm")
}
}
function SubmitLogOutForm() {
document.getElementById("LogOutForm").submit();
}
</script>
</body>


Well this is because of overflow, you need to use overflow:hidden in your css like this
.footerWrapper {
overflow:hidden;
}
It'll be all fine


Working Fine.
.footerInnerContainer{
display:block;
}


The above answers didn't work for me, but this did. Hope it helps somebody out.
.footerWrapper {
position: absolute;
bottom: -5px;
}

Related

Trigger button accesing a custom url

I want to auto trigger button accesing/load to a custom url/page taking a parameter from that url/page
when the user is in domain home (homepage) and click an image href (link, button, doesn't matter) i need to be redirected and land on "domain/projects/#homes" and from there take the parameter "#homes" and autoload/autoclick/automatic trigger a button with that parameter from url.
The reason that i need this is because from homepage i have a banner with 4 photos representing the categories of projects, and the grid with filters is in the page domain/projects, so i want the user be able to click one categorie from homepage and be redirected to domain/projects and trigger a button in the grid with filters. This page is in Wordpress.
searching i have found that this can be done with jquery.
the "ul li" options/filters are selected when the class "active" is added to the "li" tag
The problems : from what i understand Wordpress have built in jquery so the "$" the simbols are replaced by "jQuery" or something like that, the other problem is that the filter and html is defined like this:
<div class="et_pb_code_inner">
<script>
jQuery(document).ready(function() {
if (window.location.search == "mharquitecto.cl/proyectos/#casas") {
$("ul.simplefilter_55 li:nth-child(1)").addClass("active");
}
/*if (window.location.search == "?return") {
p200table.button( 7 ).trigger();
}*/
});
</script>
</div>undefined</div>undefined<div class="et_pb_module et_pb_fullwidth_code et_pb_fullwidth_code_1">
<div class="et_pb_code_inner">
<!-- CSS Part Start From Here-->
<style>
.portfolio-wraper {
margin-bottom: 20px;
}
li#all {
margin: 0;
}
.simplefilter li {
margin-top: 5px;
}
.filtr-search {
margin-top: 10px !important;
width: 200px !important;
margin-bottom: 20px;
}
#all-simplefilter {
display: inline;
padding-left: 0px !important;
}
#f-simplefilter-55 {
display: inline;
padding-left: 0px !important;
}
#keyframes .YouTubePopUp-Content {
from {
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
.YouTubePopUp-Content {
animation-name: .YouTubePopUp-Content;
}
.YouTubePopUp-Close {
background: url(DOMAIN/wp-content/plugins/portfolio-filter-gallery//img/close-icon-white.png) no-repeat;
background-size: 50px 50px;
-webkit-background-size: 70px 50px;
-moz-background-size: 70px 50px;
-o-background-size: 70px 50px;
}
ul.simplefilter {
margin-left: 0 !important;
}
.pfg_img_55 {
width: 100% !important;
height: 100% !important;
}
.filter_gallery_55>a {
position: initial !important;
}
.thumbnail_55 {
width: 100% !important;
height: auto;
margin-bottom: 0px !important;
}
.filtr-item {
padding-right: 7px !important;
padding-left: 7px !important;
padding-top: 7px !important;
padding-bottom: 7px !important;
}
.filtr-item img {
transition: all .2s !important
}
.simplefilter_55 li {
background-color: #ccc;
color: ;
}
.simplefilter_55 li:hover {
background-color: !important;
}
.simplefilter_55 li.active {
background-color: !important;
}
</style>
<div class="portfolio-wraper pfg-bootstrap" version="1.4.7">
<div class="col-lg-12 col-md-12 col-xs-12 text-center">
<ul id="all-simplefilter" class="filtr-control-55 simplefilter simplefilter_55">
<li id="all" class="active filtr-controls-55" data-filter="all">Todos</li>
</ul>
<ul id="f-simplefilter-55" class="filtr-control-55 simplefilter simplefilter_55">
<li data-filter="1" class="filtr-controls-55">Casas</li>
<li data-filter="2" class="filtr-controls-55">Arquitecturas Comerciales</li>
<li data-filter="3" class="filtr-controls-55">Quinchos</li>
<li data-filter="4" class="filtr-controls-55">Remodelaciones</li>
</ul>
</div>
<!-- Shuffle & Sort Controls -->
<div class="row loading-wrapper text-center">
<img decoding="async" src="DOMAIN/wp-content/plugins/portfolio-filter-gallery//img/loading-icon.gif" width="60">
</div>
<div class="filter_gallery_55 row filtr-container filters-div" style="opacity:0; display:none;">
<a href="DOMAIN/project/proyecto-1/" target="_blank" title="casa 1" title="casa 1">
<div data-category="1" data-sort="casa 1" class="animateonload filtr-item filtr_item_55 single_one col-lg-3 col-md-4 col-sm-6 col-12">
<img decoding="async" class=" thumbnail_55 pfg-img pfg_img_55 img-responsive hvr-grow-shadow" src="DOMAIN/wp-content/uploads/2022/12/la-vivienda-de-formas-aerodinamicas-lleva-su-relacion-con-el-agua-a-otro-nivel-de-la-mano-del-arquitecto-frances-david-tajchman-43692def-1500x871_87fab854_1200x630-300x158.jpeg" alt="">
<span class="item-desc item_desc_55">casa 1</span>
</div>
</a>
<a href="DOMAIN/project/proyecto-1/DOMAIN/project/proyecto-2/" target="_blank" title="casa 2" title="casa 2">
<div data-category="1" data-sort="casa 2" class="animateonload filtr-item filtr_item_55 single_one col-lg-3 col-md-4 col-sm-6 col-12">
<img decoding="async" class=" thumbnail_55 pfg-img pfg_img_55 img-responsive hvr-grow-shadow" src="DOMAIN/wp-content/uploads/2022/12/4-PROYECTOS-DE-ARQUITECTURA-INNOVADORES1-1024x768-1-300x225.jpeg" alt="">
<span class="item-desc item_desc_55">casa 2</span>
</div>
</a>
<a href="DOMAIN/project/proyecto-3/" target="_blank" title="arq com 1" title="arq com 1">
<div data-category="2" data-sort="arq com 1" class="animateonload filtr-item filtr_item_55 single_one col-lg-3 col-md-4 col-sm-6 col-12">
<img decoding="async" class=" thumbnail_55 pfg-img pfg_img_55 img-responsive hvr-grow-shadow" src="DOMAIN/wp-content/uploads/2022/12/descarga-9-300x164.jpeg" alt="">
<span class="item-desc item_desc_55">arq com 1</span>
</div>
</a>
<a href="DOMAIN/project/proyecto-4/" target="_blank" title="arq com 2" title="arq com 2">
<div data-category="2" data-sort="arq com 2" class="animateonload filtr-item filtr_item_55 single_one col-lg-3 col-md-4 col-sm-6 col-12">
<img decoding="async" class=" thumbnail_55 pfg-img pfg_img_55 img-responsive hvr-grow-shadow" src="DOMAIN/wp-content/uploads/2022/12/hotel-OZADI_JOSE_CAMPOS_fad-arquitectura-2015-942x531-1-300x169.jpeg" alt="">
<span class="item-desc item_desc_55">arq com 2</span>
</div>
</a>
<a href="DOMAIN/project/proyecto-5/" target="_blank" title="quincho 1" title="quincho 1">
<div data-category="3" data-sort="quincho 1" class="animateonload filtr-item filtr_item_55 single_one col-lg-3 col-md-4 col-sm-6 col-12">
<img decoding="async" class=" thumbnail_55 pfg-img pfg_img_55 img-responsive hvr-grow-shadow" src="DOMAIN/wp-content/uploads/2022/12/776_3_HR_ZeitzMOCAA_HeatherwickStudio_Credit_Iwan_Baan_View_of_Zeitz_MOCAA_in_Silo_Square-300x200.jpeg" alt="">
<span class="item-desc item_desc_55">quincho 1</span>
</div>
</a>
<a href="DOMAIN/project/proyecto-6/" target="_blank" title="remodelacion 1" title="remodelacion 1">
<div data-category="4" data-sort="remodelacion 1" class="animateonload filtr-item filtr_item_55 single_one col-lg-3 col-md-4 col-sm-6 col-12">
<img decoding="async" class=" thumbnail_55 pfg-img pfg_img_55 img-responsive hvr-grow-shadow" src="DOMAIN/wp-content/uploads/2022/12/031-Los-100-Mejores-Proyectos-Arquitectonicos-del-Siglo-XXI-image79-300x200.jpeg" alt="">
<span class="item-desc item_desc_55">remodelacion 1</span>
</div>
</a>
</div>
</div>
<script>
setTimeout(function() {
jQuery(".thumbnail_55").each(function() {
// console.log(jQuery(this).width() + "x" + jQuery(this).height())
var h = jQuery(this).height();
var w = jQuery(this).width();
jQuery(this).height(h);
jQuery(this).width(w);
jQuery(this).resize();
});
}, 2500);
jQuery(document).ready(function(jQuery) {
jQuery('.filtr-item').addClass('animateonload');
jQuery('#filter_gallery_55').show();
jQuery('.loading-wrapper').hide();
jQuery(".loader_img").hide();
jQuery(".lg_load_more").show();
jQuery(".filtr-container").css("opacity", 1);
//Filterizd Default options
options = {
animationDuration: 0.5,
callbacks: {
onFilteringStart: function() {},
onFilteringEnd: function() {},
onShufflingStart: function() {},
onShufflingEnd: function() {},
onSortingStart: function() {},
onSortingEnd: function() {}
},
controlsSelector: '.filtr-controls-55',
filter: 'all',
filterOutCss: {
top: '0px',
left: '0px',
opacity: 0.001,
transform: ''
},
filterInCss: {
top: '0px',
left: '0px',
opacity: 1,
transform: ''
},
layout: 'sameWidth',
selector: '.filtr-item',
setupControls: false
}
var filterizd = jQuery('.filter_gallery_55').filterizr(options);
//filterizd.filterizr('sort', 'domIndex', 'desc');
jQuery('.filter_gallery_55').imagesLoaded(function() {
// images have already loaded, instantiate Filterizr
jQuery('.filter_gallery_55').filterizr(options);
});
//bootstrap-lightbox-js
// delegate calls to data-toggle="lightbox"
jQuery(document).delegate('*[data-toggle="lightbox"]:not([data-gallery="navigateTo"])', 'click', function(event) {
event.preventDefault();
return jQuery(this).ekkoLightbox({
onShown: function() {
/* if (window.console) {
return console.log('Checking our the events huh?');
} */
},
onNavigate: function(direction, itemIndex) {
if (window.console) {
return console.log('Navigating ' + direction + '. Current item: ' + itemIndex);
}
}
});
});
jQuery('.filtr-control-55 [data-filter]').click(function() {
//jQuery('.swiper-55').swipebox('swipebox-destroy');
var targetFilter = jQuery(this).data('filter');
var lighbox_class_name = "pfg-lightbox-" + targetFilter;
jQuery('.pfg-lightbox-' + targetFilter).attr('data-lightbox', lighbox_class_name); // add data filter for parent filters
});
//Programatically call
jQuery('#open-image').click(function(e) {
e.preventDefault();
jQuery(this).ekkoLightbox();
});
jQuery('#open-youtube').click(function(e) {
e.preventDefault();
jQuery(this).ekkoLightbox();
});
// navigateTo
jQuery(document).delegate('*[data-gallery="navigateTo"]', 'click', function(event) {
event.preventDefault();
var lb;
return jQuery(this).ekkoLightbox({
onShown: function() {
lb = this;
jQuery(lb.modal_content).on('click', '.modal-footer a', function(e) {
e.preventDefault();
lb.navigateTo(2);
});
}
});
});
// video player
jQuery(function() {
jQuery("a.video-box-55").YouTubePopUp({
autoplay: 0
}); // Disable autoplay
});
});
</script>
</div>
</div>
FIX UPDATE I've found a solution with php and with divi filterable portfolio. Here is :
$feature = new DBC_Default_Portfolio_Tab('cat1');
$feature->init();
class DBC_Default_Portfolio_Tab {
private $slug;
public function __construct($category_slug) {
$this->slug = $category_slug;
}
public function init() {
add_filter('et_pb_filterable_portfolio_shortcode_output', array($this, 'dbc_set_default_portfolio_tab'));
add_action('wp_head', array($this, 'dbc_default_portfolio_tab_css'));
}
function dbc_set_default_portfolio_tab($output) {
$output = str_replace(
'class="active" data-category-slug="all"',
'data-category-slug="all"',
$output
);
$output = str_replace(
'data-category-slug="'.esc_attr($this->slug).'"',
'data-category-slug="'.esc_attr($this->slug).'" class="active"',
$output
);
return $output;
}
function dbc_default_portfolio_tab_css() {
?>
<style>
.et_pb_portfolio_filter_all {
display: none !important;
}
.et_pb_portfolio_item:not(.project_category-<?php esc_html_e($this->slug); ?>) {
display: none;
}
</style>
<?php
}
}

Box in css gets colored in a square shape instead of skewed

I'm working on a website. I'm coloring the menu items, but when coloring in the top left image (background color), it gets colored in square.
I would like to have it colored in skewed, so that it follows the black outline.
A screenshot of the problem and some of the html:
Is there anything I could do to make this work?
The html code of the bar:
<div class="iwgh2-bar">
<div class="iw2-layout iw2-default-breakpoint">
<div class="iw2-wrapper iw2-default-margin">
<div class="iw2-inner-wrapper">
<div class="iwgh2-navigation">
<a class="iw2-branded" href="https://www.vlaanderen.be/nl" target="_self">
<div class="iwgh2-branding-logo"></div>
<span>Vlaanderen</span>
</a>
<div class="iw2-menu iw2-menu-has-items" data-show-menu-help="Toon navigatie menu" data-hide-menu-help="Verberg navigatie menu">
<div class="iwgh2-navigation-menu-toggle-wrapper">
<div class="iwgh2-navigation-menu-toggle-animation-wrapper" style="">
<a class="iwgh2-navigation-menu-site" style="" href="http://binnenland.vlaanderen.be">Agentschap Binnenlands Bestuur</a>
<a class="iwgh2-navigation-menu-breadcrumb" style="" href="http://www.gelijkekansen.be">Gelijke Kansen</a>
<a class="iwgh2-navigation-menu-toggle iw2-exclude-from-outbound-link-tracking" href="javascript:;" aria-expanded="false" aria-owns="64ed92f1-fece-e61f-2d15-0af8093d9040" aria-controls="64ed92f1-fece-e61f-2d15-0af8093d9040"><span class="iw2-visually-hidden iw2-help-text"> Toon navigatie menu </span></a>
</div>
</div>
<div class="iwgh2-flyout-wrapper iw2-window-closed" style="display: none; left: 375.4px;" tabindex="-1" id="64ed92f1-fece-e61f-2d15-0af8093d9040">
<div class="iwgh2-search iw2-hidden" role="search">
<div class="iwgh2-form-label">
<label for="iwgh2-search-field">Zoeken</label>
</div>
<div class="iwgh2-form-textfield">
<input id="iwgh2-search-field" class="iwgh2-search-field iwgh2-form-text" name="query" type="search">
</div>
<div class="iwgh2-form-actions">
<div class="iwgh2-form-action">
<div class="iwgh2-form-button">
<input class="iwgh2-form-submit" name="op" value="" type="submit">
</div>
</div>
</div>
</div>
<ul class="iw2-menu-items" tabindex="-1">
<li class="iw2-menu-item"><a class="iw2-menu-item-wrapper" href="http://lokaalbestuur.vlaanderen.be" target="_self">Lokaal Bestuur</a></li>
<li class="iw2-menu-item"><a class="iw2-menu-item-wrapper" href="http://www.thuisindestad.be" target="_self">Vlaams Stedenbeleid</a></li>
<li class="iw2-menu-item"><a class="iw2-menu-item-wrapper" href="http://integratiebeleid.vlaanderen.be" target="_self">Integratie en Inburgering</a></li>
<li class="iw2-menu-item"><a class="iw2-menu-item-wrapper" href="http://www.vlaamserand.be" target="_self">Beleid Vlaamse Rand</a></li>
<li class="iw2-menu-item"><a class="iw2-menu-item-wrapper" href="http://brussel.vlaanderen.be/home.html" target="_self">Beleid Brussel</a></li>
</ul>
</div>
</div>
</div>
<div class="iwgh2-extensions">
<div class="iwgh2-extension-contact" data-show-menu-help="Toon menu" data-hide-menu-help="Verberg menu">
<a class="iwgh2-extension-contact-toggle iw2-exclude-from-outbound-link-tracking" href="http://www.gelijkekansen.be/Praktisch/Contact.aspx" target="_self" aria-owns="906864c8-0db7-9b35-52ce-143b0e4d962a" aria-controls="906864c8-0db7-9b35-52ce-143b0e4d962a" aria-expanded="false"><span class="iw2-visually-hidden iw2-help-text"> Toon menu </span>Contacteer ons</a>
<div class="iwgh2-extension-contact-wrapper iwgh2-flyout-wrapper">
<div class="iwgh2-contact-menu iw2-window-closed iw2-menu-has-items" style="display:none;" tabindex="-1" id="906864c8-0db7-9b35-52ce-143b0e4d962a">
<div class="iwgh2-contact-menu-header">
<span class="iw2-menu-item-title">Gelijke kansen</span>
</div>
<ul class="iw2-menu-items">
<li class="iw2-menu-item iw2-contact-section-entry iw2-contact-section-entry-icon-link iw2-contact-section-entry-type-link"><a class="iw2-menu-item-wrapper" href="http://www.gelijkekansen.be/Praktisch/Contact.aspx" target="_self"><span class="iw2-menu-item-title">Contacteer ons</span>
<div class="iw2-menu-item-description"></div>
</a></li>
<li class="iw2-menu-item iw2-contact-section-entry iw2-contact-section-entry-icon-link iw2-contact-section-entry-type-link"><a class="iw2-menu-item-wrapper" href="http://binnenland.vlaanderen.be/klachten" target="_self"><span class="iw2-menu-item-title">Klachten</span>
<div class="iw2-menu-item-description">Waar kan ik terecht met een klacht?</div>
</a></li>
</ul>
</div>
<div class="iwgh2-windows">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
css:
.iwgh2.iwgh2-redesign .iwgh2-bar {
background-color: #fff;
border-bottom: 1px solid #cbd2da;
}
.iwgh2.iwgh2-redesign.iwgh2-default-margin .iw2-layout .iw2-wrapper.iw2-default-margin {
padding: 0;
}
.iwgh2-bar .iw2-wrapper {
*zoom: 1;
position: relative;
}
.iw2-wrapper .iw2-inner-wrapper {
position: relative;
}
.iwgh2-navigation {
float: left;
white-space: nowrap;
}
.iwgh2.iwgh2-redesign .iwgh2-navigation>a {
color: #333332;
font-size: 1.1875em;
line-height: 2.31579em;
text-transform: none;
transition: color 0.2s;
}
.iwgh2.iwgh2-redesign.iwgh2-redesign-alt .iwgh2-branding-logo {
position: relative;
width: 47px;
background-color: #FFE507;
overflow: hidden;
}
.iwgh2 .iw2-menu {
display: inline-block;
vertical-align: bottom;
position: relative;
}
.iwgh2.iwgh2-redesign.iwgh2-default-margin .iw2-layout {
max-width: none;
}
.iwgh2-bar .iw2-layout {
position: relative;
overflow: visible;
}

Take a look at this fiddle and see if that is what you wanted
#trapezoid {
border-bottom: 100px solid #FFE507;
border-right: 25px solid transparent;
height: 0;
width: 100px;
}
https://jsfiddle.net/CaffeinatedCod3r/r7deqakL/
More CSS Shapes : https://css-tricks.com/the-shapes-of-css/

CSS position fixed moved childrens

I'm trying to create chat just like facebook or google. I have created chat-container class which holds users list and chat boxes.
chat-container is fixed with bottom:0 and right: 0, so its position is perfect.
.chat-container {
position: fixed;
bottom: 0;
right: 0;
padding: 5px;
}
The problem is that I am getting a lot of users from server. So, I would like to add max-height: value. When I add this property then all my chat-boxes include userslist is being misaligned.
Each chat box has class chat-box and and inside chat-body..chat-box
.chat-box {
display: inline-block;
max-width: 300px;
min-width: 100px;
}
.chat-body {
max-width: 500px;
min-width: 100px;
overflow-y: scroll;
max-height: 200px;
}
How can I solve that?
EDIT - HTML:
<div class="chat-container">
<div class="chat-box" *ngFor="let chat of openedChats; let first = first;">
<p-panel [toggleable]="true">
<p-header>
<a class="ui-panel-titlebar-icon ui-panel-titlebar-toggler ui-corner-all ui-state-default" (click)="onCloseChat(chat)">
<span class="fa fa-fw fa-close"></span>
</a>
<b>{{chat.recipient.name}}</b>
</p-header>
<div class="chat-body" #chatbody>
<div *ngFor="let message of chat.messages">
<!--TODO: Get current user id | change to ngClass-->
<div *ngIf="message.sender.id != loggedUserId" class="chat-inner-message">
{{message.message}}
</div>
<div *ngIf="message.sender.id == loggedUserId" class="chat-my-message">
{{message.message}}
</div>
</div>
</div>
<hr>
<input type="text" class="chat-input" (keyup.enter)="onSendMessage(messageInput, chat.recipient.id)" #messageInput>
<button pButton type="button" label="Send" (click)="onSendMessage(messageInput, chat.recipient.id)" style="width:100%"></button>
<!--<span *ngIf='first'>{{setChatInputFocus()}}</span>-->
</p-panel>
</div>
<div class="chat-box">
<p-panel [toggleable]="true" [collapsed]="true">
<p-header>
Chat
</p-header>
<ul class="ultima-menu">
<li *ngFor="let user of visibleUsers" (click)="onUserSelected($event, user.id)" style="padding: 3%">
<div style="display: inline; cursor: pointer;">
<div>
<img style="vertical-align:middle" src="{{user?.settings?.photoSrc}}" class="circular-portrait" width="30px" height="30px"
alt="{{user.name}}">
<span>
{{user.name}} {{user.surname}}
</span>
</div>
</div>
</li>
</ul>
<hr>
<input pInputText placeholder="Search" [ngModel]="userTypeaheadText" (ngModelChange)="userTypeahedChanged($event)">
</p-panel>
</div>
</div>

CSS - How to have swiper slider arrows outside of slider that takes up 12 column row

I am using swiper slider and would like to have navigation arrows outside of the slider. What I would basically like to do is the same as it looks like on airbnb site, where slider with images takes up whole 12 column row, but arrows are outside of it.
I am using bootstrap twitter css framework and I have tried various things but nothing worked and don't know how to achieve this?
The css is this:
.swiper-container {
margin-top: 50px;
position: relative;
}
.arrow-left {
position: absolute;
top: 50%;
left: 0;
}
.arrow-right {
position: absolute;
top: 50%;
right: 0;
}
Html looks like this:
<div class="row swiper-container">
<div class="arrow-left">
<i class="ion-chevron-left"></i>
</div>
<div class="col-md-12 swiper-wrapper">
#foreach($videos as $video)
<div class="swiper-slide video-card">
<header class="card__thumb">
<img src="{{ $video->getThumbnail() }}"/>
</header>
<div class="card__body">
<div class="card__category">
</div>
<small>
{{ $video->created_at->diffForHumans() }}
</small>
<span class="video-title">
<p>
#if($video->title != '')
{{ $video->title }} <i class="ion-arrow-right-c"></i>
#else
Untitled
#endif
</p>
</span>
</div>
</div>
#endforeach
</div>
<div class="arrow-right">
<i class="ion-chevron-right"></i>
</div>
</div>
And this is the script:
var carousel = function carousel() {
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
nextButton: '.arrow-left',
prevButton: '.arrow-right',
slidesPerView: 4,
simulateTouch: false,
spaceBetween: 15,
breakpoints: {
1181: {
slidesPerView: 4
},
1180: {
slidesPerView: 3
},
1020: {
slidesPerView: 2
},
700: {
slidesPerView: 1
}
}
});
};
$(document).ready(function () {
carousel();
});

I just did this for one of my current projects.
You just have to change the location of the navigation HTML buttons and put them outside the swiper-container. For a better approach and behavior from the library, add a new class to them, and change the element in the JavaScript call.
Example:
<div class="swiper-container">
<div class="swiper-slides"></div>
</div>
<div class="swiper-button-prev-unique"></div>
<div class="swiper-button-next-unique"></div>
let carousel = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next-unique',
prevEl: '.swiper-button-prev-unique'
}
});
That worked perfect, and you can put your arrows outside the wrapper with ease with CSS.

For all my React folks out there:
import { Swiper as SwiperClass } from 'swiper/types';
import { Swiper, SwiperSlide } from 'swiper/react';
export const MySwiper = () => {
const [swiperRef, setSwiperRef] = useState<SwiperClass>();
const theSlides = useMemo(()=> ['slide one', 'slide two'], [])
const handlePrevious = useCallback(() => {
swiperRef?.slidePrev();
}, [swiperRef]);
const handleNext = useCallback(() => {
swiperRef?.slideNext();
}, [swiperRef]);
return (
<div>
<div>
<button onClick={handlePrevious }>
previous
</button>
</div>
<Swiper
onSwiper={setSwiperRef}
>
{theSlides.map((slide) => (<SwiperSlide key={slide}>{slide}</SwiperSlide>)
</Swiper>
<div>
<button onClick={handleNext}>
Next
</button>
</div>
</div>
);
};

If you using multiple swipers then you need to add different class names to swiper-cotainer and pagination arrows. And then create new Swiper and bind each arrows to local swiper.
let arr_next = $('.template-next') //your arrows class name
let arr_prev = $('.template-prev') //your arrows class name
$('.swiper-container--template').each(function (index, element) {
$(this).addClass('swiper' + index);
arr_next[index].classList.add('template-next' + index);
arr_prev[index].classList.add('template-prev' + index);
new Swiper('.swiper' + index, {
slidesPerView: 2,
navigation: {
nextEl: '.template-next'+index,
prevEl: '.template-prev'+index
},
slidesPerView: 2,
//spaceBetween: 100,
loop: true,
breakpoints: {
961: { slidesPerView: 2 },
740: { slidesPerView: 1 },
},
});
});
`

var swiper = new Swiper('.swiper-container', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
slidesPerView: 3,
spaceBetween: 10,
autoplay: 3500,
autoplayDisableOnInteraction: false,
loop: true,
breakpoints: {
1024: {
slidesPerView: 3,
spaceBetween: 40
},
768: {
slidesPerView: 3,
spaceBetween: 30
},
640: {
slidesPerView: 2,
spaceBetween: 20
},
320: {
slidesPerView: 1,
spaceBetween: 10
}
}
});
.container{max-width: 600px;margin: 0 auto;}
.swiper_wrap{padding:0px 50px;height:100%;width: 100%;position: relative;display: block;text-align: left;}
.swiper-button-next{
margin-top: 0px;
position: absolute;
top: 50%;
right: -40px;
width: 45px;
height: 45px;
transform: translateY(-50%);
}
.swiper-button-prev{
position: absolute;
top: 50%;
left: -40px;
width: 45px;
height: 45px;
transform: translateY(-50%);
margin-top: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet"/>
<div class="container">
<div class="swiper_wrap">
<div class="slider-wrapper">
<div class="swiper-button-prev"></div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#">
<img src="http://redsqdesign.co.uk/wp-content/uploads/2017/02/red-square.png">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="http://redsqdesign.co.uk/wp-content/uploads/2017/02/red-square.png">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="http://redsqdesign.co.uk/wp-content/uploads/2017/02/red-square.png">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="http://redsqdesign.co.uk/wp-content/uploads/2017/02/red-square.png">
</a>
</div><div class="swiper-slide">
<a href="#">
<img src="http://redsqdesign.co.uk/wp-content/uploads/2017/02/red-square.png">
</a>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
<script src="http://www.jakse.si/test/jakse/taxi/js/swiper.min.js"></script>
This works for me, it is the same like older answer, but maybe it looks better :)

Put this below swiper block:
.section {
.swiper-button-prev {
left: -20px;
}
.swiper-button-next {
right: -20px;
}
}
<div class="section">
<div class="swiper">
<ul class="swiper-wrapper">
<li class="swiper-slide">
</li>
</ul>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>

if anyone is interested I've found an easy work-around for this issue
position: fixed; will override the overflow:hidden; of the parent but it will make it appear relative to the root element, adding transform to the wrapper will make it relative again to the parent.
new Swiper(".my-swiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
}
});
.custom-swiper-wrapper {
transform: translate(0, 0);
.swiper-custom-nav {
position: fixed;
}
}
<div class="container custom-swiper-wrapper">
<div class="swiper my-swiper">
<div class="swiper-wrapper">
swiper items here
</div>
<div class="swiper-button-next swiper-custom-nav"></div>
<div class="swiper-button-prev swiper-custom-nav"></div>
</div>
</div>

This is a general solution. To move your arrows outside the container you'll need to first remove the arrow divs from .swiper-container.
Make another bigger container that has .swiper-container and your moved arrows. Give this bigger container position: relative as a reference to arrows that have position: absolute.
Make sure that the .swiper-container width is changed to a value smaller than 100% (e.g. 90% 95%) to avoid overlapping with the arrows.
If you like to keep the .swiper-container width same as that of the entire page width then give -ve margin to the bigger container.

This works if slidesPerView = 1:
.swiper-container {
padding-left: 50px;
padding-right: 50px;
}
.swiper-slide {
visibility: hidden;
}
.swiper-slide.swiper-slide-active {
visibility: visible;
}

In the wrapper function "carousel" we are using to initialize our Swiper instance we can use Swiper's native methods slideNext and slidePrev to add event listeners explicitly to ONLY children of a shared parent element.
1020: {
slidesPerView: 2
},
700: {
slidesPerView: 1
}
}
});
mySwiper.el.parentElement.querySelector(".arrow-left").addEventListener('click',
() => mySwiper.slideNext());
mySwiper.el.parentElement.querySelector(".arrow-right").addEventListener('click',
() => mySwiper.slidePrev());
};
For this to work fully, .swiper-container, .arrow-right and .arrow-left will need to share a wrapper. In Leff's case ".swiper-container" should work just fine:
<div class="row swiper-container">
<div class="arrow-left">
Because this approach allows us to isolate selected elements to a shared parent container, this can be safely used as part of a block of code that might appear more than once.

This is the basic example of how to achieve it. You were close. I slightly modified the code to make it visible within the snippet.
$(document).ready(function () {
var carousel = function carousel() {
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
nextButton: '.arrow-left',
prevButton: '.arrow-right',
slidesPerView: 4,
simulateTouch: false,
spaceBetween: 15,
breakpoints: {
1181: {
slidesPerView: 4
},
1180: {
slidesPerView: 3
},
1020: {
slidesPerView: 2
},
700: {
slidesPerView: 1
}
}
});
};
carousel();
});
.row.swiper-container {
margin-top: 50px;
position: relative;
width: 70%;
margin: 0 auto;
}
.arrow-left {
position: absolute;
background: gray;
top: 50%;
left: -40px;
width: 20px;
height: 20px;
transform: translateY(-50%);
}
.arrow-right {
position: absolute;
background: gray;
top: 50%;
right: -40px;
width: 20px;
height: 20px;
transform: translateY(-50%);
}
.swiper-wrapper {
margin: 0 auto;
height: 200px;
background: #f00;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.jquery.min.js"></script>
<div class="row swiper-container">
<div class="arrow-left">
<i class="ion-chevron-left"></i>
</div>
<div class="col-md-12 swiper-wrapper">
<div class="swiper-slide video-card">
<header class="card__thumb">
<img src="{{ $video->getThumbnail() }}"/>
</header>
<div class="card__body">
<div class="card__category">
</div>
<small>
</small>
<span class="video-title">
<p>
</p>
</span>
</div>
</div>
</div>
<div class="arrow-right">
<i class="ion-chevron-right"></i>
</div>
</div>

Ok, I had another method,
What the guys suggesting will not work with multiple sliders on page.
So, I added another two arrows, which will trigger the real arrows.
the swiper had:
{
navigation: {
nextEl: '.xnext',
prevEl: '.xprev',
}
}
$('.swiper-button-next').click(
function(e){
$(this).parents('.swiper-container').find('.xnext').trigger('click');
});
$('.swiper-button-prev').click(function(e){$(this).parents('.swiper-container').find('.xprev').trigger('click');});

The code below help to use more than one swiper, using one class. (At first I was used this in a php loop of swipers)
const swiperContainers = document.querySelectorAll('#swiper-global-container');
const swipers = document.querySelectorAll('#swiper-global-container .swiper');
swipers.forEach((swiper, index) => {
swiper.classList.add(`swiper-${index}`);
})
swiperContainers.forEach((container, index) => {
container.querySelector('.swiper-button-next').classList.add(`swiper-next-${index}`)
container.querySelector('.swiper-button-prev').classList.add(`swiper-prev-${index}`)
})
swipers.forEach((swiper, index) => {
new Swiper(`.swiper-${index}`, {
navigation: {
nextEl: `.swiper-next-${index}`,
prevEl: `.swiper-prev-${index}`,
},
});
});
html,
body {
margin: 0;
padding: 0;
}
main {
display: flex;
flex-direction: column;
min-width: 1300px;
}
#swiper-global-container {
flex: 1;
position: relative;
max-width: 1250px;
margin: 0 auto;
}
.swiper-slide {
max-height: 50vh;
}
.swiper {
max-width: 1200px;
margin: 0 auto;
}
.swiper-button-prev {
left: -50px !important;
}
.swiper-button-next {
right: -50px !important;
}
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<main>
<div id="swiper-global-container">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img
src="https://images.unsplash.com/photo-1652961735386-883c83e4d464?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670"
alt="">
</div>
<div class="swiper-slide">
<img
src="https://images.unsplash.com/photo-1572035563691-0944e6a816d5?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670"
alt="">
</div>
<div class="swiper-slide">
<img
src="https://images.unsplash.com/photo-1652697911040-52d0453522a6?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2574"
alt="">
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div id="swiper-global-container">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img
src="https://images.unsplash.com/photo-1652721684678-a147a957a03e?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2748"
alt="">
</div>
<div class="swiper-slide">
<img
src="https://images.unsplash.com/photo-1652898756182-04023f4135a1?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2664"
alt="">
</div>
<div class="swiper-slide">
<img
src="https://images.unsplash.com/photo-1652162539309-c96b2694f02b?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1655"
alt="">
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</main>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

I'm using react so I didn't want to go through the trouble of creating new event handlers for each of the toggles. I came up with a solution where you just add an extra div wrapper to the slide content and add padding:
html
<div class="row swiper-container">
<div class="arrow-left">
<i class="ion-chevron-left"></i>
</div>
<div class="col-md-12 swiper-wrapper">
#foreach($videos as $video)
<div class="swiper-slide video-card">
<div class="video-card-inner">
<header class="card__thumb">
<img src="{{ $video->getThumbnail() }}"/>
</header>
<div class="card__body">
<div class="card__category">
</div>
<small>
{{ $video->created_at->diffForHumans() }}
</small>
<span class="video-title">
<p>
#if($video->title != '')
{{ $video->title }} <i class="ion-arrow-right-c"></i>
#else
Untitled
#endif
</p>
</span>
</div>
</div>
</div>
#endforeach
</div>
<div class="arrow-right">
<i class="ion-chevron-right"></i>
</div>
</div>
css
.arrow-left {
left: 0;
}
.arrow-right {
right: 0;
}
.video-card {
padding: 0rem 2rem;
}
The padding within the slide will create a gap with the .video-card-inner element that will house all of your content, thus allowing the arrows to sit outside of your visible content. You can still achieve this with custom toggles, but it will also work with their default toggles.

Just stumbled upon this issue today, here's my attempt at solving it. Basically it only requires you wrapping .swiper-container inside additional .swiper-container-wrapper, as Swiper allows passing references to HTMLElement instead of selector string. And you also get to keep the class names, no discrete classes required for navigation elements or container.
At this point both navigation elements are placed inside .swiper-container-wrapper, as .swiper-container's siblings.
$('.swiper-container-wrapper').each(function (index, element) {
var swiperContainer = $(element).children('.swiper-container').get(0);
var nextEl = $(element).children('.swiper-button-next').get(0);
var prevEl = $(element).children('.swiper-button-prev').get(0);
new Swiper(swiperContainer, {
navigation: {
nextEl: nextEl,
prevEl: prevEl,
},
});
});

How to make custom dots in owl carousel?

I have implemented custom prev next buttons(i ommit css styles for prev next buttons), but havent dots. Who know what is mistake I did?
// owl.carousel.css
.owl-controls {
text-align: center;
}
.owl-controls .owl-dot {
display: inline-block;
}
.owl-controls .owl-dot span {
background-color: #333;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
display: block;
height: 12px;
margin: 5px 7px;
width: 12px;
filter: Alpha(Opacity=500);/*IE7 fix*/
opacity: 0.5;
}
.owl-controls .owl-dot.active span, .owl-controls .owl-dot:hover span {
filter: Alpha(Opacity=100);/*IE7 fix*/
opacity: 1;
}
<script>
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
navText: ["<img src='prevArrow.png'>","<img src='nextArrow.png'>"],
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
}
}
})
});
</script>
<div class="owl-carousel">
<img src="lylka.png" alt="">
<img src="lylka.png" alt="">
<img src="lylka.png" alt="">
<img src="lylka.png" alt="">
<img src="lylka.png" alt="">
</div>

Use option dotsContainer, but sometimes it works oddly.
For example
<div id='carousel' class='owl-carousel'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
<ul id='carousel-custom-dots' class='owl-dots'>
<li class='owl-dot'><!-- Anything in here --></li>
<li class='owl-dot'></li>
<li class='owl-dot'></li>
</ul>
Next include this inside of your options object.
owl.owlCarousel({
dotsContainer: '#carousel-custom-dots'
});
The following tells Owl Carousel 2 to go to a slide based on the index of the dot that was clicked.
$('.owl-dot').click(function () {
owl.trigger('to.owl.carousel', [$(this).index(), 300]);
});
That should be all you need to get custom dots up and going with Owl Carousel 2.
via http://derickruiz.com/owl-carousel-custom-dots

You can solve the problem in this way:
HTML code
<section id="slider" class="content-slider row">
<div class="col-8 owl-carousel slide-cnt">
<div class="slide"><h3>TITOLO</h3></div>
<div class="slide"><h3>TITOLO</h3></div>
<div class="slide"><h3>TITOLO</h3></div>
</div>
<div class="col-4 dots-cnt">
<ul class="elenco-articoli">
<li>Titolo</li>
<li>Titolo</li>
<li>Titolo</li>
</ul>
</div>
JS code:
var owl;
owl = jQuery('.owl-carousel').owlCarousel({
loop:true,
autoplay: true,
autoplaySpeed: 600,
nav:true,
navText: ["<",">"],
dots:false,
items:1
});
jQuery('.elenco-articoli').on('click', 'li', function(e) {
owl.trigger('to.owl.carousel', [jQuery(this).index(), 300]);
});
This work for me.
If you want you can elaborate on: https://codepen.io/vbeetlejuice/pen/dRaero

CSS:
.owl-dots button i {
position: absolute;
z-index: 9999;
width: 100%;
height: 100%;
}
HTML:
<div class="testimonial_slider owl-carousel owl-theme">
<div class="item" data-dot="<button><i></i><img src='images/testimonial-1.jpg' alt='' class='img-fluid' /></button>">
<div class="testimonial-dec">
<h4>Aklima The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections Bonorum et Malorum original.</h4>
</div>
<div class="testimonial-name mt-4">
<p class="border-bottom d-inline-block"><span class="d-inline-block text-uppercase text-dark">AKLIMA</span> - COO, AMERIMAR ENTERPRISES, INC.</p>
</div>
</div>
</div>
jQuery:
$('.testimonial_slider').owlCarousel({
loop:false,
margin:32,
nav:false,
dots: true,
items:1,
mouseDrag: false,
dotsData: true,
});
enter image preview