Tips for vertically aligning arrows in slick slider in relation to the image with text below

As shown in the image, my arrows are positioned at the top 50% relative to the height of the slide container. [1]: https://i.sstatic.net/DjEZh.png

Answer №1

Check out my new demo on Codepen: https://codepen.io/basti-n/pen/NWNRKYX?editors=1111

  <div class="main-content">
    <div class="arrow-left"><</div>
    <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="elephant">
  <div class="arrow-right">></div>
  </div>
    <div class="description">
      <caption>Lorem Ipsum</caption>
    </div>
</div>
body {
  box-sizing: border-box;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  display: flex;
  flex-flow: column;
  align-items: center;
}

.main-content {
  display: flex;
  align-items: center;

  img {
    height: 300px;
    width: auto;
    margin: 0 10px;
  }
}

.description {
  margin-top: 12px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

NextAuth - simulating the login process of OneLogin

I've been working on setting up a local OneLogin mocked service using WireMock. Everything has been going smoothly so far, as I was able to mock most of the OAuth OneLogin flow. However, I'm facing an issue with the last part that is preventing i ...

Express and Webpack Error: "SyntaxError: Unexpected token <"

I am facing difficulties while testing my React webpage that I built using Webpack. When trying to run an Express server, the localhost page appears blank with a console message saying Uncaught SyntaxError: Unexpected token <. It seems like the webpage ...

Retrieve the identifiers of various HTML elements and store them in an array

Within a div, there are multiple objects. I am trying to retrieve the IDs of all elements based on their class, knowing that the number of elements may vary. So far, my attempt has been: arr = $(".listitem #checkBox").hasClass('checkedItem').att ...

Oops! The system encountered a problem: the property 'modalStack' is not recognized on the type 'NgxSmartModalService'. Maybe you meant to use '_modalStack' instead?

Currently, I'm facing an issue while attempting to run ng build --prod in my Angular 6 project. I have also incorporated the NgxSmartModal package for handling modals. Unfortunately, the build process is failing and I can't seem to figure out why ...

Switch between buttons using jQuery

I'm currently working on creating a container that contains 4 buttons and I want to implement a toggle function between them. Right now, the toggle works by double-clicking a button (1 click - show, 2 clicks - hide). However, when I click on another b ...

What kind of performance can be expected when storing a Uint8Array in IndexedDB?

Is it more storage-efficient to store a uint8array or an arrayBuffer with the same data in indexedDB? That's my question. ...

Transmitting Several Pictures at Once Through WhatsApp-WebJS

I have encountered a challenge while attempting to send multiple images in a single WhatsApp message using the WhatsApp-WebJS library. Despite receiving a "success" confirmation without any errors, the images and message fail to appear on WhatsAp ...

Encounter an issue with the Kendo editor React wrapper showcasing an error

Looking to incorporate an editor using Kendo UI, but encountering an error TypeError: list is undefined in node_modules/@progress/kendo-ui/js/editor/plugins/inlineformat.js:422 The library was installed through: npm install --save @progress/kendo-editor- ...

Steps for determining the grade earned by an individual

Seeking assistance with my Homework assignment as I am struggling to calculate it accurately. The code provided is what I have so far, and this is the task outlined by my teacher: Develop a webpage that displays the heading "Student Grades" and allows in ...

problem with horizontally scrolling container using flexbox

Currently, I am utilizing flexbox css to create a container with multiple div elements that should scroll horizontally. However, I am encountering an issue where adding more divs causes the container to shift to the left, resulting in some of the divs bein ...

Describe a Typescript Interface Value as a collection of strings or any input provided as an argument

Uncertain if the question title is accurate - currently developing react components within a library that has specific predefined values for certain properties. However, additional values may need to be added on a per usage basis. So far, this setup is fun ...

Combining text and hyperlinks within React/TypeScript variables for dynamic content

Seeking a way to combine a string and a link within an attribute of one variable: const News = [ { headline: 'some headline', text: "some text" + <a href='url'> click me </a>, }, ]; When I displa ...

The issue with updating values in the jQuery UI datepicker persists

When using the jquery datepicker ui, you may notice that the value attributes of the associated html fields do not update immediately. For example: http://jsfiddle.net/4tXP4/ Check out this link for more details: http://jqueryui.com/demos/datepicker/al ...

Unable to sign out user from the server side using Next.js and Supabase

Is there a way to log out a user on the server side using Supabase as the authentication provider? I initially thought that simply calling this function would work: export const getServerSideProps: GetServerSideProps = withPageAuth({ redirectTo: &apos ...

prevent a text field from inheriting the Jquery.ui CSS styling

I am experiencing a minor issue where my text field is inheriting the CSS of the jquery.ui. This textfield is located inside a Jquery.ui tabs script, which applies its CSS by adding a class of the jquery ui tabs. How can I prevent this from happening and e ...

Issue with JavaScript's variable scoping

After testing my application, I found that the following code was originally working: var htm = "<div> My content </div>"; $("#divprint").html(htm); window.setTimeout('window.print()', 4000); However, when I attempted to enclose it ...

Is it possible to create a custom options array in React-Select?

I've been working with react-select using the package from . The required format for the options prop is {value:something, label:something}. I have a list of objects with additional key-value pairs and I'm wondering if there's a way to avoi ...

Employing a function to concatenate promises

In my coding process, I have come across a situation where I need to fetch content and then save it using two separate functions. Each function performs a different task based on the type of content provided. These functions act as helper functions in my o ...

Having trouble getting the sass lighten functions to work properly with a variable

Currently incorporating SASS into my project, Below is the snippet of my variable code :root, [data-theme="default"] { --text-color: #383143; } $text-color: var(--text-color); Utilizing the variable with a lighten function as shown below, body { ...

Error encountered: "An unexpected token '<' was found while utilizing publicPath in vue-cli version 4"

I need to implement a prefix for my routes and assets, so according to the vue-cli documentation, I have set the publicPath in my vue.config.js file: module.exports = { publicPath: '/foo/' } However, when I try to build the project f ...