Remove bxslider - javascript

I have the District Theme and I really dislike the Portfolio Slider it has. I want to remove it so my Works show in a list instead of a slider.
I've tried the following css scripts but they dont work
/*Removing slideshow from portfolio and alignment*/
.single-portfolio .bxslider {
opacity: 1;
position:static;
}
.single-portfolio .bxslider li {
list-style-type:none;
margin:0;
}
I don't know how to remove the slider or where to find it. I want to keep it for other parts of the site but I don't want to use it on the portfolio and single-portfolio pages.

edit: Oh wait, did I misunderstood the problem? You don't want to hide the slider but change the slider items just to show as a list?
You're not trying to hide the slider with that css, it does what it says: sets opacity to 1 on a scale from 0 to 1 sot it's fully visible.
Set the slider instead to display: none
.single-portfolio .bxslider {
display: none;
}
Thou, I believe there's some setting where you could disable the usage of bxslider in portfolio page. But I don't know the theme so this will have to do.

Related

Adding Title to Elementor Pro Media Carousel Widget

I'm missing the option to add a title to each slide of the Elementor Pro Media Carousel Widget. I'm using the description of images within the overlay option, but I also need to have a title of each slide shown underneath within the carousel. A text input field each slide would be best, but if there's away to append the media's title with some script would be a way also. Does anyone have a solution for this? The image carousel has that option. I don't know why it's not included within the media carousel widget though..
Thanks in advance!
You can display the caption or title in the Overlay. And using CSS give the overlay transparent background and opacity=1 so the text is always visible. Something like this:
.elementor-carousel-image-overlay.e-overlay-animation-fade {
background-color: transparent;
bottom: 0px !important;
align-items: flex-end;
opacity: 1 !important;
font-weight: 500;
padding: 0;
padding-bottom: 3%;
}
If you need to add another field to an existing widget, the best approach is to do it by editing the widget code and add a new field.
Alternatively, you can look for another Media Carousel Widget that might have those fields already. Jet Elements has one: https://crocoblock.com/plugins/jetelements/ but there are probably others.
EDIT: If neither of those is an option, you can look at https://wordpress.org/plugins/unlimited-elements-for-elementor/. It might work for what you need.

Delay in bootstrap toggle menu

I have built a menu bar using bootstrap. In the responsive mode, when the toggle menu is activated, the menu list items comes up quickly while the background container comes with a delay. Similarly when the toggle mode is deactivated, the container disappears while the menu items disappear with a delay. I have uploaded a video of this issue here: Video
Kindly, please let me know how to solve this problem.
It is because your #custom-collapse in the main navigation section of your css has the overflow set to visible remove that and it should work fine.
#custom-collapse {
border: none;
box-shadow: none;
}
If you put the overflow to visible to remove the scrollbar you should maybe try
.navbar-collapse.in {
overflow-y: visible;
}

Flexslider issue - large blue flash appearing seconds after page load

I've been having some issues with a flexslider on a Wordpress-built site. Basically, when the page loads and the sldier loads a large blue flash appears for a split second then disappears. You can see it in the link below:
http://www.jacksonvilletreebarbers.com/
I'm guessing the jquery isn't called correctly, or at the right time. But I could be wrong.
And help or input would be a great help! Thank you!
If you initiate FlexSlider with the fade animation after page load when images are visible, FlexSlider will set the opacity on the first image to 0 and then fade it in. This will cause a "flashing" which is quite ugly.
One possible solution which doesn't involve any javascript hacking.
Add a .loading class on your flexslider container, e.g. <div class="flexslider loading">.
Configure your flex init script by adding:
start: function(slider) { slider.removeClass('loading'); }
Add this to your CSS:
.flexslider.loading .slides > li:first-child { opacity: 1 !important; }
More about this problem: https://github.com/woothemes/FlexSlider/issues/848

Image color overlay in slider plugin, text above overlay (wordpress)

I'm using the meta slider plugin for Wordpress. A big part of my design is a grey overlay on the slider. I can manage to get the overlay but it goes over the caption in the slider.
I've tried a lot and I haven't been able to do this on my own. How do I get the text above the overlay?
.metaslider .caption-wrap {
background: rgba(50,50,50, 0.4);
padding-top:13%;
}
.overlay:before {
background:none;
}
Keep in mind though, that the above css should be loaded after the slider.css has been loaded, in order for the css rules to have a higher priority.
I just assigned a class called overlay in the metaslider caption box, then I edit the css under Customize mode.
.overlay img {
background-color:white;
opacity:0.7;
}

Jquery slider boxes

Not sure if this is a javascript issue or can be solved with CSS.
Im using an image with a text overlay slider but seem to having some issues with where the slider starts on page load. This is the live example, I would like the slider to be hidden on load and appear from below on rollover.
http://www.warface.co.uk/clients/detail-shoppe/directors
Many thanks
You can just add the initial top value to your CSS, like this:
.boxcaption{
top: 240px; /* add this! */
float: left;
....
}
This should give you the initial effect you want, and on hover it'll slide up on the first hover.
Just include this line which sets the inital css so that the two .cover divs are "hidden"
$('.boxgrid.captionfull .cover').css('top', 240);
like this
...
$(document).ready(function(){
$('.boxgrid.captionfull .cover').css('top', 240);
//Full Caption Sliding (Hidden to Visible)
...

Categories