I've been working on customizing the navigation arrows and dots for the React Owl Carousel npm package using CSS or JS for quite some time now, but have not been successful. I am determined to avoid using jQuery in this project.
https://i.sstatic.net/f1PcV.jpg
My goal is to style them into this specific shape/design.👇 https://i.sstatic.net/XUBhj.png
"Identify the arrows (by id or class name) provided by the library in the DOM inspector and then customize them using your own CSS." After following these steps, I successfully modified the arrows as desired. Thank you! -Aly Abd El Rahman
::scss::
#root {
.App {
.owl-carousel {
.owl-nav {
.owl-prev {
height: 80px;
width: 40px;
position: absolute;
top: 47%;
transform: translateY(-50%);
cursor: pointer;
left: 21px;
background: transparent
url(../../../assets/arrow-left-dark.svg) no-repeat 50%;
transform: translateY(-50%);
span {
visibility: hidden;
}
}
.owl-next {
height: 80px;
width: 40px;
position: absolute;
top: 47%;
transform: translateY(-50%);
cursor: pointer;
right: 21px;
background: transparent
url(../../../assets/arrow-left-dark.svg) no-repeat 50%;
transform: translateY(-50%) rotate(180deg);
span {
visibility: hidden;
}
}
}
.owl-dots {
position: absolute;
top: 89%;
left: 25vw;
.active {
background-color: white !important;
height: 10px !important;
width: 10px !important;
transition: all 0.3s linear !important;
}
.owl-dot {
background: hsla(0, 0%, 100%, 0.3);
display: inline-block;
height: 8px;
width: 8px;
margin-right: 30px;
vertical-align: middle;
border: none;
transition: all 0.3s linear;
span {
visibility: hidden;
}
}
}
}
}
}
I decided to create a reusable directive in order to make a common component, but I am facing an issue trying to capture the click event of an element inside the template used within the directive. Take a look at the code snippet below for better understa ...
I am facing a somewhat complicated issue with my web app. I am working on making it more desktop-like by adding features such as dynamically loading information into a DIV based on previously selected items. Currently, I am using a cookie to store the data ...
In my current project, I am working on an Angular application that incorporates the Ace editor with ui-ace for text editing on the screen. I am looking to create a function that will execute when the cursor changes, updating a specific model object when th ...
I was curious about the possibility of naming arrays within a multi-array, similar to how it can be done with individual arrays. For example: var cars = new Array(); cars[0] = "Saab"; cars[1] = "Volvo"; cars[2] = "BMW"; I was wondering if there was a way ...
select { width: 300px; font-family: inherit; font-size: 18px; padding-top: 10px; padding-bottom: 10px; padding-right: 30px; display:block; color: #999; border: none; border-bottom: 1px solid #757575; } *:focus { outline: #757575; } ...
**Why is my Node.js YAML file causing an error?** name: Node.js CI on: push: branches: [ "main" ] pull_request: branches: [ "main" ] jobs: build: runs-on: ubuntu-latest strategy: matrix: node-ver ...
Is there a way to smoothly change the background image of the body by fading out the old one and fadeIn the new one? An error occurred when attempting this: Uncaught TypeError: Object url(file:///C:/Users/.../p1bg_cutted.png) has no method 'fadeOut ...
I have set up multiple session routes such as /login and /forgotpassword. These routes are wrapped in the SessionContainer, while the remaining routes are enclosed in the MainAppContainer. The structure of my app is as follows: <Provider store={stor ...
This code features a simple JavaScript function where the user is prompted to enter a number into a text field, which is then multiplied by 5 and displayed in an alert box. However, there seems to be an issue with it not functioning properly. Can anyone pr ...
Edit: Check out this non-functional repository with a slightly different approach In the process of testing, I found the need to mock the material UI date pickers (assuming they have their own tests and don't require additional testing). Initially, I ...
I am currently experimenting with incorporating an infinite loop before the prodNum and quantity prompts to consistently accept user input and display the output in a table. Although the program is functional when executed, it fails to showcase the table ...
For educational purposes, I am designing a website where users can sign in by entering their name on the login page. After signing in, they will be redirected to the home page which displays a personalized welcome message using their name. I have included ...
Snippet of HTML Code <div class="container1"> <div class="box1">Box 1</div> <div class="box2">Box 2</div> <div class="box3">Box 3</div> </div> <div clas ...
I am facing a challenge with hiding and displaying two aside divs to enable a fullscreen view of my central div main. The layout is created using flexbox to assign proportions, but when I try to redisplay the elements, it disrupts the original design. Belo ...
For my D3 bar charts, I am working with a substantial amount of JSON data obtained from an API. My goal is to display only 10-20 bars at a time. Would it be possible to implement pagination using D3 itself, or should I explore alternative methods (such a ...
How can I make a <rect> in SVG expand its width using animateTransform based on a specified value? Additionally, I want the color of the <rect> to change according to the following conditions: If the <rect> value is between 0 and 29: {f ...
Is there a way to automatically switch to a minimized browser window from a different program window (such as Outlook or Explorer) when an alert is received on a specific tab? I'm looking for a Javascript/Jquery solution. I've attempted the foll ...
For each option selected, a specific number of buttons should appear beneath the dropdown menu. Since this number varies for each option, should I use JSON to define the buttons? I'm feeling confused and would appreciate any guidance on how to proceed ...
The date is currently shown in the correct format (31/08/21), but when onChange gets triggered, startDate changes to something like this: Tue Aug 31 2021 21:29:17 GMT+0200 (Central European Summer Time) Is there a way to maintain the display format I wa ...
My goal is to calculate the sum and rest of two different values after adding or subtracting. For instance, I have a Total variable = 500, along with two input fields - one for MXN and the other for USD. Additionally, there is a USD variable set at 17.5. T ...