Question

我是React JS的新手。我曾尝试在React中使用猫头鹰旋转木马。

我从npm安装的包链接是

https://www.npmjs.com/package/react-owl-carousel

按照说明我在特定页面上导入了Owl Carousel组件。这是代码：

<Style TargetType="{x:Type e:DataGrid}"  BasedOn="{StaticResource {x:Type DataGrid}}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGrid}">
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
                    <ScrollViewer x:Name="DG_ScrollViewer" Focusable="false">
                        <ScrollViewer.Template>
                            <ControlTemplate TargetType="{x:Type ScrollViewer}">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="*"/>
                                        <RowDefinition Height="Auto"/>
                                    </Grid.RowDefinitions>
                                    <Label Content="{Binding Label, RelativeSource={RelativeSource TemplatedParent}}" ContentStringFormat="{}{0}: " />
                                    <Button Grid.Row="1" Command="{x:Static DataGrid.SelectAllCommand}" Focusable="false" Style="{DynamicResource {ComponentResourceKey ResourceId=DataGridSelectAllButtonStyle, TypeInTargetAssembly={x:Type DataGrid}}}" Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.All}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" Width="{Binding CellsPanelHorizontalOffset, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
                                    <DataGridColumnHeadersPresenter x:Name="PART_ColumnHeadersPresenter" Grid.Row="1" Grid.Column="1" Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.Column}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
                                    <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" Grid.ColumnSpan="2" Grid.Row="2"/>
                                    <ScrollBar x:Name="PART_VerticalScrollBar" Grid.Column="2" Maximum="{TemplateBinding ScrollableHeight}" Orientation="Vertical" Grid.Row="2" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}"/>
                                    <Grid Grid.Column="1" Grid.Row="3">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="{Binding NonFrozenColumnsViewportHorizontalOffset, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
                                            <ColumnDefinition Width="*"/>
                                        </Grid.ColumnDefinitions>
                                        <ScrollBar x:Name="PART_HorizontalScrollBar" Grid.Column="1" Maximum="{TemplateBinding ScrollableWidth}" Orientation="Horizontal" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}"/>
                                    </Grid>
                                </Grid>
                            </ControlTemplate>
                        </ScrollViewer.Template>
                        <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </ScrollViewer>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsGrouping" Value="true"/>
                <Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="false"/>
            </MultiTrigger.Conditions>
            <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
        </MultiTrigger>
    </Style.Triggers>
</Style>

默认情况下此代码一次输出3个项目（因为3是owl轮播中的默认值）。我想我可以用4初始化值，因此尝试了，

import React, { Component } from 'react';
import {Grid, Row, Col , ProgressBar } from 'react-bootstrap';
import UserAvtar from '../common/UserAvtar.js';
import SectionHeaderOfCards  from '../common/SectionHeaderOfCards.js';
import OwlCarousel from 'react-owl-carousel';

const options = {
    items: 4,
};

class DashboardPage extends Component {
  render() {
    return (
      <div>
          <section className="has-small__padding has-grey__bg">
              <UserAvtar />
          </section>
          <section className="has-small__padding">
              <Grid>
                  <SectionHeaderOfCards title="Recommended Matches" />
                  <OwlCarousel margin={10} >
                      <div class="item"><h4>1</h4></div>
                      <div class="item"><h4>2</h4></div>
                      <div class="item"><h4>3</h4></div>
                      <div class="item"><h4>4</h4></div>
                      <div class="item"><h4>5</h4></div>
                      <div class="item"><h4>6</h4></div>
                  </OwlCarousel>
              </Grid>
          </section>
      </div>
    );
  }
}

export default DashboardPage;

但它没有用。它的节点包中也没有提到任何内容。任何人都知道如何在React Owl旋转木马中使用猫头鹰旋转木马选项？

除此之外，我想为768px到1200px之间的设备显示3项，在500px到767px之间显示2项，为499px以下的设备显示1项。

以下是正常的猫头鹰轮播如何使用该选项来添加响应性。 https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html

如何在React owl carousel中实现相同目标？

Answer 1

您需要将options对象添加到OwlCarousel组件。

示例：

<OwlCarousel margin={10} items={4} > //... </OwlCarouse>

或

<OwlCarousel margin={10} {...options} > //... </OwlCarouse>

Answer 2

最好使用：

render() {
    const options = {
      items: 1,
      nav: true,
      navText:["<div className='nav-btn prev-slide'></div>","<div className='nav-btn next-slide'></div>"],
      rewind: true,
      autoplay: true,
      slideBy: 1,
      dots: true,
      dotsEach: true,
      dotData: true
    };

    return (
<OwlCarousel ref="gallery" options={options}>
          ...
        </OwlCarousel>
)

如何在React Owl Carousel中使用猫头鹰旋转木马选项？

2 个答案: